Andreas06 tabs missplaced in Internet Explorer

[crapmaster]

Hi!

I have tried the andreas06 theme on my server. The theme looks great and I really want to use it.
When the blog is accessed with Firefox all is well but when loaded with Internet Explorer (have tried version 6 and 7) the tabs gets missplaced.

See http://crapmaster.mine.nu/s9y/andreas06.png for screenshot.

Does anyone have any idea what's wrong and how I should fix it?

Thanks,

/Peter

[judebert]

Whoa. That's neat, although obviously not what you wanted. It looks to me like somebody is misinterpreting the height and/or width of the tab block.

I'd start with SlayerOffice's MODI, which will let you highlight the boxes and find out what their true extents are. You could also use plain CSS for that, by giving the tab class a visible border. Then you can debug from there.

Sorry, but the screenshot just doesn't give me enough information to provide a more specific fix. A URL might prompt somebody with more experience than I to have a look.

[crapmaster]

The main problem seems to be style.css:

Code: Select all

#nav li{
float:left;
margin:0 4px 0 0;
padding:0;
}

Once I added the float:left; line the tabs was aligned from left to right.

Now I only need to figure out why the text gets aligned good in Firefox but not in Internet Explorer.

[Don Chambers]

Do you have this site "live" somewhere? It would be easier to diagnose the problem from a real site rather than a screenshot.

[crapmaster]

Do you have this site "live" somewhere? It would be easier to diagnose the problem from a real site rather than a screenshot.

Yes, it's live (at least at the moment) here : http://development.crapmaster.mine.nu/

[Don Chambers]

Looks like you resolved your problem.

[crapmaster]

Looks like you resolved your problem.

Almost. I got the tabs aligned left to right. Just need to figure out how to get the text "lifted" so it's not overwritten in Internet Explorer. Every changed I make to make it look good in IE makes ot look ugly in Firefox. Not sure how to get it good looking in both.

[crapmaster]

Ok, now I finally got it look nice.
I have changed the following entries in style.css:

Code: Select all

#nav a span {
float:left;
background:url({TEMPLATE_PATH}img/righttabs.gif) no-repeat right top;
display:block;
color:#808080;
font-size:1.2em;
margin:0 6px 0 0;
padding:7px 20px 8px 6px;
letter-spacing:-1px;
}

#nav .current a span {
background:url({TEMPLATE_PATH}img/righttabs.gif) no-repeat right -41px;
display:block;
color:#808080;
font-size:1.2em;
margin:0 6px 0 0;
padding:7px 20px 8px 6px;
letter-spacing:-1px;}

Have changed the padding to 8px to get the text to "rise" a little.

[markheath]

I'm having the same issue with Andreas06. I figured out the float:left to get my tabs vertically aligned, but can't find any nice way of getting the height of the nav-bar right in IE (at the moment, the bottom is cut off), without affecting FireFox. Anyone else got any suggestions?

thanks
Mark

[markheath]

OK, I've worked it out now. The first margin-top statement needs to be removed, for rendering in IE7 to work correctly.

Code: Select all

#wrap2{
background:url({TEMPLATE_PATH}img/header.jpg) top left no-repeat;
margin-top: -10px!important; // REMOVE THIS LINE
margin-top:0;
padding:10px;
width:730px;
}

#nav li{
float:left; // INSERT THIS LINE
margin:0 4px 0 0;
padding:0;
}

[Xanthouos]

Thank you, I was about to post about this. Perhaps someone who has the power, can update the Spartacus copy of this theme.