Alignment problem in Firefox

So, yes, I'm a total hack and I'm mixing tables with CSS but perhaps someone could help me out with this.

Page looks great in IE:

http://www.stock.inkart.net/amphibians/

And ok in FF, except that after the tabs the entire page shifts to the right (as if there isn't a return.)

Anything jump out at anyone? Thanks!

 

#tabs6 {
float:left;        [color=red]/*delete this*/[/color]
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}

Code (markup):

cheers,

gary

 

Thanks for your help! It didn't totally solve the problem (I had to add a couple breaks at a temp fix) but it put me on the right path.

Gave you some Rep and visited your website BTW.

 

Does anyone know if it's possible to hide code from IE? I had to add <br><br> to trick Firefox into placing the table underneath the tabs, but in IE there's now a weird looking gap:

http://www.stock.inkart.net/reptiles/

I know you can use the conditional comments like <!--[if IE]> but I was curious if there was some way to hide those two breaks from IE?

Thanks!

 

Add:

margin-bottom: 10px;

Code (markup):

to your #tabs6 CSS (you can change the 10px to whatever you want/need) and take the BR tags out.

 

Thanks for the good input, but the problem isn't the breaks themselves but rather Firefox not seeing a 'return' after the category tabs. Right now I'm fooling it into placing the rest of the page under the header by adding the breaks. If I take out them out the table shifts far to the right to directly after the tabs.

Again, it looks ok in IE without the breaks. And ok in FF with them. I was wondering if I could hide the breaks from IE? Or is that crazy?

 

Ok the reason that's happening is because you're floating the links in the #tabs6 UL. So in order to fix that, you need to clear the table that follows it. So where you have:

<br /><br /><table style="width: 750px">

Code (markup):

Change that to:

<table style="width: 750px;clear: both">

Code (markup):

And that will give you the "return" you are looking for.

You should try to get ALL of your CSS into the styles.css file, just as an FYI.

 

Brilliant! Thanks very much for your help. Positive rep given!