Topic: IE6/Win margin/padding trouble (Page 1 of 1)

I've been having some trouble with IE6/Win at my new homepage. First was a trouble with the content section getting cut before the content ended, but that was solved by assigning the content div "position: relative".

But now I've got another problem that I can't seem to find a solution to . When you hover over a link, either in the content section or in the linkbar, the margins will change. In the content area the left margin will decrease for a couple of lines around the link. In the linkbar the left margin+padding will dissappear, and if you hover over one of the style-buttons the top and left margin+padding will dissappear.

Another problem I've had that I haven't found any solution to is that sometimes the two style buttons will have the same color in IE6/Win even though they have separate styles assigned to them.

I've been searching for the web for an answer, but I can't seem to find anything about any of the problems. Hopefully someone here will know how to fix it



_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

I'll look at it more closely when I get back from work. Lunch doesn't all enough time

But, I would look at this part of your style sheet:

a.linkbar, a.linkbar:visited {

	display: block;

	padding: 1px;



	width: 100%;



	font-family: sans-serif;

	font-weight: 400;

	border: none;

	background: inherit;

	

}

	

a.linkbar:hover {

	padding: 0;



	padding-left: 2em;

	margin-right: 0;



	background-color: #700;



	border: 1px solid #f61;

}

I think it is because you have the padding set different for the a, a:visited than you do for the a:hover.


<edit>
maybe not. now that i see how you are doing that style switcher section, i'll have to look at it further
</edit>

Later,

C:\


~Binary is best~

[This message has been edited by CPrompt (edited 10-29-2003).]

The reason for reducing the padding with 1px is that I add a 1px border, so the size of the object remains the same it both states. I've used that 'idea' before, and I know other use the same thing, without causing any problems. So I doubt that is the cause of my problems...

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

Ahhh... so I'm not the only experiencing this bug.

The first thing I'd do is to make sure that each rule appears in every link state, for the sake of consistency. For example, try renaming "background-color: #700" to "background: #700," because that's what you used in the other states. Or, try removing the "background: inherit" entirely (I recall some browsers having trouble with "inherit."

Hmm, outta ideas for now, I'll take another look at it later.

I've tested this page under Opera 7 and IE, but they didn't render the CSS properties exactly in the same way. I've taken two screenshots to show you the difference :

Opera
IE

It seems that Opera renders some elements differently, especially your <h3> and the menu elements.

Otherwise, I have two remarks about the CSS code itself :

- In the file named 01.css, in the class bigCode, there is a ":" that you need to replace by a ";"

- I can also read :

a, a:visited {

display: inline;

padding: 0px 2px;

text-decoration: none;

[b]border-bottom: 1px dashed black;[/b]

color: #fa6;

[b]border-bottom: 1px dashed #fa6;[/b]

}

Even if I think I understand what you wanted to render (a dashed line alternating black and yellow parts, right ?), it doesn't work, neither under Opera 7 nor under IE. I believe you can remove one of the two lines.


Now, about the content problem, the only way I've found to fix it is to set a fixed padding in the content class. For example, instead of "padding: 2%" you should write "padding: 5px". Your design won't be as 'liquid' as it was, but the bug under IE will vanish.

Now I'll take a look at the linkbar...

Edit: grammar...



[This message has been edited by Moon Shadow (edited 10-30-2003).]

Thanks for the tips so far

The border is supposed to be color #fa6, the black border is just a remenant from the first version of the stylesheet that I forgot to remove.

Changed to padding to a fixed size and everything works like a dream

I changed some other paddings and margins I had that were specified using %, so the linkbar is almost working in IE6 as well now. Problem now is that the linkbar's width expand each time you hover over a link, so it happens that the linkbar is pressed bellow the content. I've been trying to find a CSS hack that can be used to make a specific rule for IE6/Win, but I can't manage to find any. All the good old avoid IE hacks are bypassed by IE6/Win now

The coloring of the style-buttons are still wrong as well, haven't managed to find a way to solve that one yet...

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

[This message has been edited by Veneficuz (edited 10-30-2003).]

[This message has been edited by Veneficuz (edited 10-30-2003).]

Putting something in a selector like

html>body ... {...}

causes IE6/win to ignore it. Opera and Mozilla don't ignore it. I'm not sure about other browsers.

By the way, your link bar drops below the content if the user has their browser not maximized (or if they're running at 800x600), which is bad. I suggest you relayout the boxes; I suggest you have the header and content areas flow normally, and give the content area a wide enough right margin to leave space for the sidebar, which you can position absolutely. That way, when the window is resized, the content area's width and the header's width will change, and everything else will stay in place.

[This message has been edited by Slime (edited 10-30-2003).]

If you want a trip, move your cursor up and down the menu in IE.

Edit: The right hand menu that is.

[This message has been edited by SPyX (edited 10-30-2003).]

SPyX: Read the first post...

Slime: the problems with the right hand menu appearing below the content happened when I changed the margins and paddings to something else than %. Haven't had time to do the final adjustments on that part yet, but I'm aware of the problem. Thanks for the tip about html>body, but I thought IE6/Win had learn't how to use the > selector...

I'll see if I can get some spare time tomorrow to do the final adjustments with the margin/padding and add some nice IE6 specific rules

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

quote:

---

Thanks for the tip about html>body, but I thought IE6/Win had learn't how to use the > selector...

---

Nope. Never has, and probably never will...

What I'm talking about didn't exist during the time of the first post.