SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Im dumbstruck over this IE padding, two examples provided!

    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>

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why does the ul need to be floated? Take it out and you'll get the effect you want.

  3. #3
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The padding isn't working for the Top and Bottom, only on the sides!

    **okay, ill just post below lol

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I just edited my post.

  5. #5
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote 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.

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i cant believe that position: relative; was the curse to this all, Ive been trying to fix it for 2 days haha.

  9. #9
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote 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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •