Im dumbstruck over this IE padding, two examples provided!

**lostseed** · Jun 18, 2006 19:27

Why does this work in IE, the padding around it.
Its only an IE Problem!

1. http://jream.com/test.html - Works in IE
2. http://jream.com/test2.html - Fails in IE

(You can just view source from those pages if you want)

HTML Code:

<html>
<title>test</title>
<head>
<style type="text/css">
a {
  padding: 10px;
  color: black;
  font-size: 20px;
}
a:hover{background-color: red;}
</style>
</head>
<body>

<a href="#">Test Link with Padding</a>

</body>
</html>

HTML Code:

<html>
<title>test</title>
<head>
<style type="text/css">
a {
	padding: 20px;
	text-decoration: none; 
	font-size: 18px;
}
a:link {color:#ccc;}
a:visited {color:#ccc;}
a:hover {color:#fff; background: #95B26D;}
a:active {color:#fff;}

ul {
	position: relative;
	float: left;
	top: 65px;
	left: 40%;
}

ul li {
	display: inline;
}
</style>
</head>
<body>

<ul>
<li>
<a href="#" title="#">Test Link with Padding</a>
</li>
</ul>

</body>
</html>

**Tyssen** · Jun 18, 2006 19:31

Why does the ul need to be floated? Take it out and you'll get the effect you want.

**lostseed** · Jun 18, 2006 19:35

Originally Posted by Tyssen

Why does the ul need to be floated? Take it out and you'll get the effect you want.

http://www.jream.com - see the top right menu,
I dont know what better thing to float it in, what would ya suggest?

Hold up, its the float that loses the top/bottom padding or the ul?

It doesnt make sense to me why that would ruin padding, unless the li container was too small and IE wont allow the a{padding} to break it.

**lostseed** · Jun 18, 2006 19:34

The padding isn't working for the Top and Bottom, only on the sides!

**okay, ill just post below lol

**Tyssen** · Jun 18, 2006 19:34

Sorry, I just edited my post.

**Tyssen** · Jun 18, 2006 19:45

What I'd do is remove add position: relative to #header and set #header ul to position: absolute and then use bottom and right values to position it. Then you can remove the float. That's not going to fix your rollover problem so then I'd set the anchors to display: block and give them a width and height.

**lostseed** · Jun 18, 2006 19:55

okay thanks, Ill put that in a list to help me.

1. Remove position:relative; from #header

2. Set #header ul to position: absolute

3. Use bottom/right values to position #header ul
4. Remove the float from #header ul
5. Set #header a{} to display block
6. Give #header a{} width and height.

okay i mesesd up my own list ill just read thru urs haha.
Haha okay, ill try this. Are you a descendant of PaulOB?

haha

**Tyssen** · Jun 18, 2006 20:04

Originally Posted by lostseed

Are you a descendant of PaulOB?

Not that I'm aware of.

By the way, that should be add position: relative to #header, not remove.

**lostseed** · Jun 18, 2006 20:03

i cant believe that position: relative; was the curse to this all, Ive been trying to fix it for 2 days haha.

User Tag List

Thread: Im dumbstruck over this IE padding, two examples provided!

Thread Tools

Display

Hybrid View

Im dumbstruck over this IE padding, two examples provided!

Bookmarks

Bookmarks

Posting Permissions