Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
Browser Specific Problems: ** FIXED ** IE6 Layout Issues & Duplicated Text?
Bottom of Page1 to 6 of 6
-
Hi all,
I'm building a website for the business I work for, its coming along ok, but IE is causing me some problems and I've ran out of ideas.
The site is here: http://www.envogen.co.uk/?page=services
A picture of the problems, incase you cant see it in your version is here: http://www.envogen.co.uk/images/08_01_23_env_ie1.png
The problems are as follow:
1. The #Content DIV is being forced wider than it is entended by something in IE6, it is fine in FireFox.
2. The Last text in the content area is repeated again below for some reason. I think this may be causing the above problem.
3. The same issues as number 2 but it relates to the list in the footer.
4. The stupid Tab doesnt display a white font in IE, but does in FF.
Any help will be much appreciated, im on a tight deadline and cant spare time to fix annoying niggles like this. Its better to be up and looking crap that not up at all.
Regards
Nick -
Hello
1. #content_header has width + padding-left/padding-right specified ... this is a good idea as some browser actlike padding is part of the width .. and other don't .. I suggest not to specify width nor any float because you only want this block to act like a block element.
2. & 3. do all the corrections .. if this probleme still occure : just add a comment (for exemple : "<!-- for IE6 only -->") right after this paragraphe.
4. try "#menu_tier2 ul li.menu_tier2_active a:link" instead of "#menu_tier2 ul li.menu_tier2_active a" .. by the way this selector is way too long .. "#menu_tier2 a:link, #menu_tier2:visited" should be enought. -
#2 and #3 would be due to Duplicate Character Bug. You might have put in some comment <!--comment-->after or before the floated element.
#4 would be if you are using the right selector to set the text. -
Thanks for the help, but im afraid it hasnt fixed any of the problems.
To cut a long story & testing phase short, it seems that IE is adding the margin's twice (making 40px instead of 20px) where they contact the outer edges of the container box (#content), this is resulting in the container being forced 40px wider than intended.
View this page in IE6 to see the results: http://www.envogen.co.uk/?page=services
If you view it in FireFox you get a perfect grid layout.
Can anyone help? -
I've changed the margin to padding and its fixed the IE problem, but to get the grid layout to work properly i've had top put clear elements in every div.
Where am I going wrong to cause these kinds of problems? -
Issues where fixed after some brain draining with a css guru I know!
1, 2 + 3: The displaced/duplicated text and structure was being caused by comments in the code. IE6 cant handle them!
4: The miss selected text element was fixed by overkill css selecting :D
The site "should" now display correctly in IE6. Fingers crossed!
Nick
1 to 6 of 6