#1
  1. Permanently Banned
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jun 2006
    Location
    In a whale
    Posts
    4,127
    Rep Power
    0

    IE and opera have no top padding


    Hey everyone,

    I am working on an old design I started a while back, and for some reason, IE and Opera do not render the top padding right. I figured that it is a bug, but I am not sure. Here is my code:
    css Code:
    body {
    	background-image: url( http://img521.imageshack.us/img521/6097/blissxk5.png );
    	color: #000000;
    	font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif;
    	font-size: 12px;
    	text-align: center;
    	padding: 0;
    	margin: 0;
    }
    a img {
    	border: 0;
    }
    a,a:link,a:visited,a:hover,a:active {
    	color: #0099FF;
    	text-decoration: underline;
    }
    a:hover {
    	color: #FF9900;
    	text-decoration: underline;
     
    }
    #container {
    	width: 85%;
    	margin: 0 auto;
    	text-align: left;
    }
    #header {
    	padding-left: 150px;
    }
    #menu {
    	width: 100%;
    	text-align: center;
    }
    #menu ul {
    	list-style-type: none;
    	display: block;
    }
    #menu li {
    	display: inline;
    }
    #menu a {
    	padding-left: 45px;
    	padding-right: 45px;
    	padding-top: 15px;
    	padding-bottom: 15px;
    }
    #menu a:hover {
    	opacity: .8 !important;
    	background-color: #999999;
    	color: #FFFFFF;
    }
     
    #main {
    	opacity: .6 !important;
    	filter: alpha(opacity=50);
    	background-color: #FFFFFF;
    	padding: 1%;
    	text-align: justify;
    }
    #main h1 {
    	color: #0075FF;
    	border-bottom: 2px solid #0099FF;
    	display: block;
    	width: 60%;
    }
    #footer {
    	text-align: center;
    }
    #footer a {
    	color: #000000;
    }

    And also IE6+ do not seem to render the filter property. Anyone know whats going on with this?
  2. #2
  3. Winemaster
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,355
    Rep Power
    168
    Need to see the page... or at least some html.
  4. #3
  5. Permanently Banned
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jun 2006
    Location
    In a whale
    Posts
    4,127
    Rep Power
    0
    Sorry, here is an example. As you can see, in FireFox it works fine, but opera and IE get rid of the top padding.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    It looks fine in Opera 9. What version(s) did you test in?

    Different browsers put different default margins and padding on elements. I recommend that you read No Margin For Error.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1227
    That was an insanely large background-image, you also might check out if you have right to use that image freely on a webpage.

    Padding where? I didn't see much difference, you need to state where you see / don't see the extra padding.
  10. #6
  11. Permanently Banned
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jun 2006
    Location
    In a whale
    Posts
    4,127
    Rep Power
    0
    Yeah it is a large background image, but I am making this design for multi resolutions. I am not sure I have the right, so I will have to check.

    The extra padding is on the nav bar links. In IE7 it don't show the top padding, in opera 9, it don't show either top or bottom padding. Cool link Kravvitz, I'll have to keep that link for future use.
  12. #7
  13. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1227
    I didn't see the padding issue in my Opera (looked the same as in FF) so I had to ask for clarification for where the issue was.
    I just upgraded Opera to 9.10 and now I see that the padding is not added. It might be a bug, have to check up that.

    For IE fix is quite easy just add some padding to #menu
    so that the padding for the links doesn't get cut off.

    Code:
    #menu ul {
    	list-style-type: none;
    	display: block;
    	padding: 15px;
    }

    Comments on this post

    • ryon420 agrees
    Last edited by Akh; March 25th, 2007 at 05:02 PM.
  14. #8
  15. Permanently Banned
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jun 2006
    Location
    In a whale
    Posts
    4,127
    Rep Power
    0
    Thanks for that fix! It seems that opera DOES apply the padding, but it doesn't allow the background to expand that padding. I'll find some way to apply a fix to that. Thanks everyone, I'll come back with my solution soon. Hopefully.
  16. #9
  17. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1227
    Looks like there is a bug in Opera 9.10 when applying opacity and padding on an inline element. If you remove the opacity-statement the padding works as expected.

    So a fix for Opera 9.10 is to float the links. (Floating adds display:block to the element.)
    Last edited by Akh; March 25th, 2007 at 05:30 PM.
  18. #10
  19. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Oh, the list-items. I didn't rollover them.

    Try this.
    Code:
    #menu li a {
      display: inline-block;
    }
    #menu ul {
      margin: 0;
    }
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo