Jump to content

Logo placement different in IE/FF


SteveHoffmanUK
 Share

Recommended Posts

I am close to getting my first non-WYSIWYG-produced website ready to make live, but have a problem with how my logo graphic is viewed in IE vs. FF/Opera. The logo is defined in my .css file thus:

body {background-image:url('parishmagbackground.gif')}#logo {background-image: url('parishmaglogo.gif');background-repeat: no-repeat;background-position: left top;height: 110px;width: 500px;}

In my .html files, here is the code for the logo:

<body><!-- LOGO PLACEMENT --><div align="left" name="Logo " id="logo"></div>

If you look at the webpage in FF or Opera, the logo is placed correctly over the blue horizontal banner background, but in IE (7, 6, 5.5), the logo drops down over the gray navigation bar below.Can anyone suggest a fix to make it OK in IE?

Link to comment
Share on other sites

Seems like there is some kind of padding/margin top left. Did you remove the margins from the body with body { margin: 0; } ?

Link to comment
Share on other sites

Seems like there is some kind of padding/margin top left. Did you remove the margins from the body with body { margin: 0; } ?
Thanks, Chris. Yes, it looks like I did. Your suggestion solved that problem.HOWEVER, the nav line below it is also "depressed" in IE but fine in FF. The code in my .css file for that is:
#navigation ul {margin: 0; /* Removes all margins */padding: 0; /* Removes all padding */} #navigation ul li{ display: inline;padding: 0px 20px 0px 20px;color: #FFFFFF;text-decoration: none;font-size: 14px;font-family: verdana, arial, helvetica, sans-serif; }#navigation ul li a {color: #FFFFFF;text-decoration: none;}#navigation ul li a:hover { /* on hover */color: #000000;

Finally, while I'm (you're) on, my headings all seem to be too much vertically spaced against the paragraph text that follows them. Taking H1 as an example, (H2 thru H6 are all the same), the coding is:

h1 {font-family: verdana, arial, helvetica, sans-serif;font-size: 26px;font-weight: normal;color: #3366CC;}

Any way of reducing the white space on all the headings?

Link to comment
Share on other sites

h1 { padding: 0px 0px 0px 0px; }If you want to modify all headers thenh1, h2, h3, h4, h5, h6 { padding: 0px 0px 0px 0px; }Only put the headers you use in your site.Play with the first and 3rd values (top/bottom).

Link to comment
Share on other sites

h1 { padding: 0px 0px 0px 0px; }If you want to modify all headers thenh1, h2, h3, h4, h5, h6 { padding: 0px 0px 0px 0px; }Only put the headers you use in your site.Play with the first and 3rd values (top/bottom).
Played around with the padding settings as you suggested, and that doesn't seem to help. Setting them to zero leaves them as they are without the "padding" defined. Increasing them does of course increase the white space, but I want to decrease it. Minus values don't work, I see.Back to my other problem: this is driving me nuts. If I set the padding in body to zero, that does raise the logo enough so that in IE it no longer overlaps the gray nav bar below it, and it looks just about OK in both IE and FF. But then my nav bar is too high in IE , so I play around with padding in the ul part and if I pad at the top so that it looks OK in IE, then it's too far down in FF. The challenge is trying to get two items (logo and nav bar) to keep the same vertical relationship in the two browsers. Should I be playing around with something other than padding?Is there any way of setting an absolute value for the two vertical placements?
Link to comment
Share on other sites

Got it.For #logo, #navigation and the three "containers" (whatever you call them) that hold the three columns of content on the page I set absolute positions, that is: 'position: absolute; top: nn pt;'. Absolute positioning means that both browsers position these elements exactly where you tell them to. Well, in the wonderful world of browser (in)compatibility, nothing's ever quite perfect: there is just a slight (maybe 1 pixel) difference, at least on my screens, so I gave myself some latitude by slightly reducing the text size so that it looks vertically OK on the gray nav background strip. Thanks for your help - in this case encouraging me to "play around". :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...