CSS Problems (Image)

fRostiE · 24 Jul 2007 at 11:07

Hi guys,

im having problems with some tabs at the top of a web page in the VLE system Moodle:

heres how is displays in Firefox :

and heres how it currently displays in Internet Explorer :

anybody got any ideas on how i can get it to display back in line ?!

Thanks,

Boov · 24 Jul 2007 at 12:02

will need to see the markup and the css first, so we can find out where the problem might be

Shoseki · 24 Jul 2007 at 12:12

VLE system Moodle?

fRostiE · 24 Jul 2007 at 12:17

Shoseki said:
VLE system Moodle?

virtual learning environment and the system is Moodle - http://moodle.org/

I'm coming at this as a complete noob looking at the code, the chap who did it is on holiday at the moment and im very new to CSS also

/***
*** Tabs
***/

.tabs {
width: auto;
margin-bottom: 15px;
border-collapse: collapse;
}

.tabs td {
padding: 0px;
}

.tabs .side {
width: 50%;
border-style: solid;
border-width: 0px 0px 1px 0px;
}

.tabrow {
border-collapse:collapse;
width:100%;
margin: 1px 0px 0px 0px;
}

.tabrow td {
padding:0 0 0px 14px;
border-style: solid;
border-width: 0px 0px 1px 0px;
}

.tabrow th {
display:none;
}
.tabrow td .tablink {
display:block;
padding:10px 14px 4px 0px;
text-align:center;
white-space:nowrap;
text-decoration:none;
}
.tabrow .last {
display:block;
padding:0px 1px 0px 0px;
}

.tabrow td.selected {
border-width: 0px;
}

i think thats the stuff thats styling the tabs

Cheers, fRostiE

Shoseki · 24 Jul 2007 at 12:23

Its the classic box model problem in IE. I am guessing the problem lies :

.tabrow td {
padding:0 0 0px 14px;
border-style: solid;
border-width: 0px 0px 1px 0px;
}

.tabrow td .tablink {
display:block;
padding:10px 14px 4px 0px;
text-align:center;
white-space:nowrap;
text-decoration:none;
}

Basically, somehow you have managed to get IE into quirksmode and it is rendering padding incorrectly.

I dunno off the top of my head how to fix

have some of the same issues myself, which is why I code so strictly to avoid quirksmode...

fRostiE · 24 Jul 2007 at 12:37

if i change

.tabrow td .tablink {
display:block;
padding:10px 14px 4px 0px;
text-align:center;
white-space:nowrap;
text-decoration:none;
}

to

.tabrow td .tablink {
display:list-item;
padding:10px 14px 4px 0px;
text-align:center;
white-space:nowrap;
text-decoration:none;
}

i get this in Internet Explorer:

hoping someone with more CSS help might have the key... this was just through random playing about

Shoseki · 24 Jul 2007 at 13:01

perhaps put the padding as zero, and add margin to the contained items instead?

fRostiE · 24 Jul 2007 at 15:29

ive tried playing around with padding and margin but to no avail

not really sure what else to try now

i've tried resetting the width twice within each element style too... no joy there either

fRostiE

Eriedor · 24 Jul 2007 at 23:15

You have a link to the live page?

fRostiE · 26 Jul 2007 at 08:34

its not live im afraid and the error only occurs if you have a log in

its on the profile editing page

fRostiE · 26 Jul 2007 at 16:35

all sorted guys

there was 2 lines of code in the anchor visited links which was knocking all of the tabs out of line

got despirate and started taking chunks out of the CSS and refreshing the page, when a chunk finally made a difference to the tabs i started taking smaller and smaller pieces out and finally got it down to two lines of code, which have now had abuse hurled at them and commented out

Thanks to those who helped

SiriusB · 26 Jul 2007 at 18:01

Ahh the good ole "delete-stuff-until-problem-goes-away" method.