SteveHoffmanUK Posted January 4, 2007 Share Posted January 4, 2007 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 More sharing options...
vchris Posted January 4, 2007 Share Posted January 4, 2007 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 More sharing options...
SteveHoffmanUK Posted January 4, 2007 Author Share Posted January 4, 2007 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 More sharing options...
vchris Posted January 4, 2007 Share Posted January 4, 2007 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 More sharing options...
pulpfiction Posted January 4, 2007 Share Posted January 4, 2007 To lift the navigation up try changing padding [bottom]#navigation ul li{ display: inline;padding: 0px 20px 10px 20px;color: #FFFFFF;text-decoration: none;font-size: 14px;font-family: verdana, arial, helvetica, sans-serif; } Link to comment Share on other sites More sharing options...
SteveHoffmanUK Posted January 4, 2007 Author Share Posted January 4, 2007 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 More sharing options...
vchris Posted January 4, 2007 Share Posted January 4, 2007 Try margins instead. Link to comment Share on other sites More sharing options...
jlhaslip Posted January 4, 2007 Share Posted January 4, 2007 set both padding and margins to zero and have a look, then add one or the other to move things to where you want them. Link to comment Share on other sites More sharing options...
SteveHoffmanUK Posted January 4, 2007 Author Share Posted January 4, 2007 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 More sharing options...
S@m Posted January 4, 2007 Share Posted January 4, 2007 Just a neat little short cut to help with padding-margin...I use this all the time. * {margin:0;padding:0;} That way everything is set to zero. To me, it makes it easier to keep track of things. Link to comment Share on other sites More sharing options...
vchris Posted January 4, 2007 Share Posted January 4, 2007 S@m: does that validate? No errors or warnings? Link to comment Share on other sites More sharing options...
S@m Posted January 4, 2007 Share Posted January 4, 2007 As far as I know...It's just like a wildcard statement. "Everything has a margin & padding of zero"I use it without any problems. If I am wrong, by all means let me know. Link to comment Share on other sites More sharing options...
vchris Posted January 4, 2007 Share Posted January 4, 2007 I just tested on w3c and it validates with no errors or warnings. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now