Page 1 of 1

Andreas06 tabs missplaced in Internet Explorer

Posted: Sun Mar 25, 2007 12:02 am
by 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

Posted: Mon Mar 26, 2007 10:23 pm
by 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.

Posted: Mon Mar 26, 2007 11:00 pm
by 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. :-(

Posted: Tue Mar 27, 2007 1:49 am
by 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.

Posted: Tue Mar 27, 2007 10:02 am
by crapmaster
Don Chambers wrote: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/

Posted: Tue Mar 27, 2007 4:14 pm
by Don Chambers
Looks like you resolved your problem.

Posted: Tue Mar 27, 2007 8:53 pm
by crapmaster
Don Chambers wrote: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.

Posted: Tue Mar 27, 2007 10:43 pm
by 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.

Posted: Fri May 11, 2007 11:20 am
by 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

Posted: Wed May 16, 2007 12:18 pm
by 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;
}


Thanks

Posted: Wed Jun 13, 2007 9:38 pm
by Xanthouos
Thank you, I was about to post about this. Perhaps someone who has the power, can update the Spartacus copy of this theme. :wink: