Firefox and Internet Explorer CSS differences
| Project: | Drupal |
| Version: | 6.1 |
| Component: | Minnelli theme |
| Category: | support request |
| Priority: | minor |
| Assigned: | RichardHill |
| Status: | closed |
Jump to:
Minnelli theme. www.richardsboat.com
In the header region, I added the following block containing the following HTML code to display a picture and website title. I know there are too many 'center' but I was trying everything I could.
_____________________________________________________________
<center>
<table align="center">
<tr align="center"><td align="center">
<font face="Comic Sans MS" size="5" color="Navy">Richard's Boat Yard<br><font face="Comic Sans MS" size="4" color="navy">Little Cranberry Island / Islesford, Maine<br></td></tr>
<tr align="center">
<td align="center">
<img src="/images/rbyhome1.jpg" width=800 height=123 border=2 align="center">
</td></tr></table>
</center>____________________________________________________________
Using IE, everything works fine. Picture and title centered. With Foxfire picture and text move to the extreme left side.
I have tried every variation of HTML to get that rascal centered... Probably 600. Keyboard practically worn out!
I then viewed source, then downloaded it so I could fiddle with the code. I can then upload the program again and follow the execution.
The culprit appears to be on line 22 on my download of the home page:
<div id="header-region" class="clear-block"><div id="block-block-1" class="clear-block block block-block">When I comment out the first div as follows:
<!--div id="header-region" class="clear-block"--><div id="block-block-1" class="clear-block block block-block">, IE and Foxfire both act the same: pix and text centered, but with some loss of formating.
I am new to Drupal, and still am learning their CSS, but I can't seem to find the problem in any of the CSS files that are loaded into the program. But I think that this constitutes a valid bug report?
Thanks for your help.
Richard Hill
#1
Possible quick fix - remove the 'display:inline' on line 324 of your style.css.
Using a table is far from ideal for this kind of thing though - as you learn more CSS, you'll no doubt find a better way :)
Good luck!
ps. Foxfire? ;)
#2
This doesn't have anything to do with Drupal, it's just a rendering difference between IE and Firefox and one browser has far more bugs than the other. As facelikebambi said, remove
display: inlinefrom line 324 and your problem should go away.Btw, to troubleshoot this sort of problem it's best to use Firebug with Firefox, that's what I used to test bambi's suggestion, it took me less than 10 seconds to confirm it.
#3
Anwswer from Richard Hill:
Hey, Thank you to bambi and Rowan!
I fixed that site and learned a lot. Well, at least I learned a little... I learned, once again however, that I am not the smartest kid on the block!!!
Too bad there is so much to learn!
That 'Firebug' is really something else. Very slick the way it lets you edit the scripts...
Would you have handled the image thing differently?
Now I need to work on keeping 'firefox', 'foxfire', and 'firebug' all straight!!!
A rose is a rose is a rose...
Thanks again,
Richard
#4
No problem.
#5
Automatically closed -- issue fixed for two weeks with no activity.