View Full Version : several minor layout issues in different browsers

Nov 5th, 2009, 03:58 AM
Ok, thanks to SB65 the major issue in IE6 is fixed but there are several minor holdouts (mostly in various versions of IE, but one issue is also effecting Firefox).

user: iesucks
pass: evilie

Of course the HTML is just index.html and the CSS is bq-clean5.css in the 'assets' sub-dir at

The problems:
In the bottom links sections 'Quicklinks' and 'Support' each link shifts a little to the left or right (left for 'Quicklinks', right for 'Support') when clicked on in IE8 and IE7 and once a link has shifted it stays shifted so I guess it has something to do with visited links? In Firefox once any link on the page has been clicked all of those links in 'Quicklinks' and 'Support' shift to the right and left respectively (again I imagine it has to do with visited links since at present all of those links go to the same place which is "#" (nowhere) and I suppose FF and IE7/8 just handle it differently?). Oddly enough this is not effecting IE6 in any way.

Before, very similar shifting was happening on the main 'navbar' links at the top (also one at a time in IE7/8 and all at once in FF) and I fixed it by adding all of the css properties to all of the link states rather than counting on inheritance. probably not the best way to fix the problem as now I have many unnecessary duplicate properties but it did fix the problem. Same thing with the very bottom links 'wordmap' and the same fix worked there too. The same fix has not helped with 'Quicklinks' and 'Support' though and now I can not see where that space is coming from because all link states have the same explicitly defined borders, margins, and padding as far as I can tell.

Only in IE6 and IE7 there is too much space (padding) on the left side of both the 'Quicklinks' and 'Support' (no extra space in IE8 or FF). Dreamweaver seems to think this could be the 'Magic Creeping Text Bug' and it says "Text inside a block element will creep to the left if the block is nested inside another block element that has border-left, padding-bottom, and no specified width or height." but it also claims this only effects IE6 (this is effecting IE6 and 7 and if anything text is creeping to the right, not left). Also when I look at the parent element it doesn't have a border-left or a padding-bottom.

So primarily I want to fix the issue but I would also like to know why Dreamweaver thinks that the conditions for this 'Magic Creeping Text Bug' exist on these elements, when as far as I can tell these elements do not meet the conditions for that bug (also in IE6 the texts in those elements don't appear to be creeping to the left but rather have to much space on the left just like IE7)..

Again with 'Quicklinks' and 'Support'.. These div elements (along with the contact details in-between them) are designed to be equal length (up to a point). So if someone later adds a few more links to one side or the other (through the CMS this will go into later) they will all three grow together even if they don't have the same number of links - so they work like equal length columns. Because of the way that is setup I can't use padding-bottom on the actual div elements in order to create a little breathing room after the last links (in 'Quicklinks' and 'Support'). So instead I used a margin-bottom on the ul element which works in FF and IE8 but doesn't seem to work in IE6/7. IE6/7 have no space after the last links and it looks a little crowded there.

The last problem is that on the crystal buttons in the top-right the text overline on hover does not work in IE6. It is strange though because if you click on one of those links the text overline does work fine for the active state. Any idea how to get it to work for the hover state in IE6? The additional hover effects using graphics also don't work for those buttons but the way that is set up I suspect that it is not possible to get it to work in IE6 and I am not concerned about that. I would just like to get the text overline on hover working.

I realize this is a lot, so if you read it all then thanks a lot for taking the time. Please don't feel like you must address all of these issues at once either, if you can offer insight into any one of these issues I would be extremely grateful. I am completely new to CSS so getting this far has been an incredible challenge for me, and very rewarding but these last few holdout problems have begun to make me lose heart, though I know that they can be fixed it is just a matter of figuring out how.

Thanks a lot for any help any of you might be able to offer.

Oh and don't mind the ugly graphics - they are all just shabby placeholders at present.

Nov 6th, 2009, 02:24 PM
Hey guys, I realize this seems like a lot to fix but I did try to break them up into separate issues. Maybe I should have just posted them separately? I just didn't want to spam the board like that though.

Please if some of you could even just pick any single issue and offer any advice I would be very grateful.