PDA

View Full Version : Border Chaos Bug - How to Hack for IE 6 & 7


johnMoss
03-08-2011, 02:41 PM
The site in question can be found here: www.shop17printers.com (http://www.shop17printers.com)

1) Through better use of code I've gotten rid of 1 bug organically, but 3 remain for IE 6 & 7. The site as it is coded now does not reflect what I have loaded in my computer with the other fix and adjustments I've tinkered with in order to try & resolve the issue, so I figured I'd stop & post the query here.

a) Border Chaos Bug -
There are two of these, both of them are in the menu area. The first is I've set a negative margin to the menu div in order to align it with the menuBarLine div above it. (Talking the menu buttons against that long orange line left to right) I've gone in and checked and/or reset the borders on the div's to zero to no avail. A space of roughly 8 px remains.

So question 1 is how to get these div's to line up 0 px against each other, properly?

b) I may get away with not having to adjust this one if I can resolve the first above, as this div directly below the menu div is the second consecutive div with a negative margin. This negative margin is set in order to have the man picture line up as close as possible with the empty space near the orange bar. I suppose I could go back in and give him his own div, but it's not that critical to be concerned with. Rather , I just want to put in a hack that says if IE 6 or 7 then set the mainContent div top margin to zero. I assume any css rule in the header of a page and placed below the style declaration will override the stylesheet, and if correct, then how is that rule written?

If(????)
.mainContent{
margin-top: 0px;
{

Corrosive
03-08-2011, 03:46 PM
http://www.quirksmode.org/css/condcom.html

johnMoss
03-09-2011, 02:16 AM
Perfect... Thanx T !

Corrosive
03-09-2011, 06:47 AM
You are welcome. I tend to try and code my way out of bugs but now and again those conditional statements come in very handy :)

johnMoss
03-09-2011, 07:27 AM
a) Border Chaos Bug -
There are two of these, both of them are in the menu area. The first is I've set a negative margin to the menu div in order to align it with the menuBarLine div above it. (Talking the menu buttons against that long orange line left to right) I've gone in and checked and/or reset the borders on the div's to zero to no avail. A space of roughly 8 px remains.

So question 1 is how to get these div's to line up 0 px against each other, properly?


Did you per chance look at the menu bar though? I don't know where I'm going wrong here...

Corrosive
03-09-2011, 09:34 AM
Well, I'd be using an unordered list and CSS sprites for that menu for starters. That way you could have the orange border on the ul tag and tabs on the li items and it may well come together for you. Drop the tables and javascript rollovers is what I am saying :)

johnMoss
03-09-2011, 04:43 PM
Ah... Inexperience rises to the occasion. I've got to learn how to do that first... Good to know for next one, thanx.

Strike that, I do know how to do that... duh... coffee.. more coffee... Fat Tuesday rolls into lost Wednesday.

Corrosive
03-09-2011, 05:08 PM
Strike that, I do know how to do that...

Thought you might ;)

duh... coffee.. more coffee... Fat Tuesday rolls into lost Wednesday.

Have doughnut with that and all will be well :)

johnMoss
03-09-2011, 05:30 PM
I'm still doing something wrong. Hack is in place, IE is catching it, but the command is showing up as text on the top in (IE 6 & 7). I thought at first I'd mis-written the statement but the same thing keeps happening after 3 tries. What me do wrong here?

<!--[if IE 6]>
.oneColFixCtrHdr #mainContent{ margin-top: 0px;}
<![endif]-->
<!--[if IE 7]>
.oneColFixCtrHdr #mainContent{ margin-top: 0px;}
<![endif]-->


www.shop17printers.com (http://www.shop17printers.com)

Corrosive
03-09-2011, 05:39 PM
You are not telling the browser that your text is a style. Try;

<!--[if IE 6]>
<style type="text/css">.oneColFixCtrHdr #mainContent{ margin-top: 0px;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">.oneColFixCtrHdr #mainContent{ margin-top: 0px;}
</style>
<![endif]-->

See if that helps.

johnMoss
03-09-2011, 06:07 PM
Like a champ... thank you sir...

Corrosive
03-09-2011, 06:22 PM
Like a champ... thank you sir...

Welcome as ever :mrgreen: