HTML Help Please

I am revamping my wife's website and have run into a problem. Just below the banner is grey when viewing with IE. It works fine in FF.

Any suggestions on how to resolve this?

www.sellshome.com/testing/index.html

 

For a start I'd recommend using that logo as a background - rather than an image. to position it exactly the same as it is now, use this:

Code:

#somediv { background-image:url(/*URL of image goes here*/);background-position:top left;background-repeat:no-repeat; }

I'm not sure if you're planning to use a repeatable background image there, though.

I'd also add something like this:

Code:

margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;

To ensure it's not IE saying that 1 = 2.

You could also apply this to the img (using inline style definitions on the image tag itself) to ensure the image isn't causing padding.

Is there a reason why the container has a height? It really shouldn't, since it means I have to scroll for no reason.

You might want to try putting

Code:

position:relative;

into the header element.

I'd also nuke the body topmargin= etc. in favour of come CSS to the same effect.

Notice that the navbar div is rising slightly above the content div. I think that's where your problem is. How about putting the nav and the content into their own container div? They should still float perfectly fine within that div, but they'd be aligned with each other.

Then you could shift that container up if required to close the gap. If you want something to render in IE but not firefox, then use this hack method:

Code:

margin-top:0px; /margin-top:-5px;

Firefox will ignore the /margin-top (as it should do) but IE will render it anyway. Make sure the hacked definition is AFTER the normal one.

 

I did a lot of experimenting last night, and moving the navbar div up with a negative margin was the only way to fix it, but I couldn't do the samr to the content div.

I'll look into what you suggested.

 

It was the only way I knew how to control the length of the navbar, precisely how I wanted it. Otherwise, I have to rely on content to determine its length.

 

I tried that, and it didn't help. I am planning on using a repeatable image though, so this is less than ideal for me.

I tried adding that to both the stylesheet and inline, and it didn't do anything to the layout.

Yeah--I added those from some advice a friend gave. I don't like it, its sloppy, imo. Removing it doesn't fix my problem, which I first suspected. I'll fix it later.

Yeah, I used a negative margin to close the gap which incidentally stopped working, presumably from something else I changed.. I couldn't do the same for the content div, for some reason. I actually moved the header, out of the conainer div altogether, and it did not help.

I tried this, unfortunately, all it does it shift the content of the div up, but does not close the white space. I've tried placing the margin settings on each div, and on the container as well.


This is so irritating. Firefox has no issue with this CSS...

 

Jeremy

<img src="images/header.jpg" style="display:block;">

 

You the man!!!

Thanks

 

You're welcome

 

*headdesk*

Well, now you know what display:block; does

 

Man now i feel stupid, i was gonna ask for html help a few weeks ago, but instead just kept struggling with it, i shoulda just asked you all Woulda saved me some time :

 

I struggled for like 3 days without asking. I feel stupid it was something so small.

 

Don't sweat it man. I had the same problem like 9 months ago.. took me half a day to find an answer for it.