SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pixel differences/webkit/gecko

    Hi Peeps,

    I am trying to learn about HTML 5 and CSS 3 so am building a site to do so but just had a query about webkit/gecko engines as have noticed a pixel jump and not sure how to remedy it in the simplest way.

    The page is:
    http://dev.pelli.co.uk/pelli/

    First issue is, as I have given the a tags padding, it has moved the padded area up over the header.
    Another issue is there is about a 2px difference between gecko (checked in Safari/Chrome) and Gecko (checked in Firefox), and not sure the best way to make it flush with the bottom of the header element.

    The code is as follows:
    Code:
    <nav>
    	<ul>
    		<li><a href="#">Photography</a></li>
    		<li><a href="#">Journal</a></li>
    		<li><a href="#">Blog</a></li>
    		<li><a href="#">Airbrushing</a></li>
    	</ul>
    </nav>
    Code:
    /*headstrip*/
    #headstrip {
    	background:url(../images/structure/logostrip-gradient.png) no-repeat #2b2b2b;
    	height:82px;
    	margin-top:8px;
    	width:100%;
    }
    
    #headstrip p { color:#d1d0d0; padding:50px 0 0 50px; }
    #headstrip p a { border-bottom:1px solid #656565; color:#fff; text-decoration:none; }
    #headstrip p a:hover { color:#dc3948; }
    
    /*nav*/
    nav ul { font-size:1.8em; margin-left:100px; }
    nav ul li { display:inline; }
    nav a {
    	background:#e7e7e7;
    	color:#2b2b2b;
    	padding:15px 20px;
    	text-decoration:none;
    }
    Thanks in advance

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, you shouldn't create your own elements because IE doesn't allow the st yling of random elements, even if they are in the HTML5 draft .

    Try giving "nav" overflow:hidden;, float the <li>'s, and then give display:block to the <a>'s .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, you shouldn't create your own elements because IE doesn't allow the st yling of random elements, even if they are in the HTML5 draft .

    Try giving "nav" overflow:hidden;, float the <li>'s, and then give display:block to the <a>'s .
    Thanks for that

    Yeah I know, there are some fixes around to deal with IE to make sure they recognise the elements but this is just a way for me to begin to learn and work with HTML 5 and CSS 3... just experimenting.

    Thank you for that I will make the changes now

  4. #4
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Magic - sorted

    Would you mind explaining which each part is for and how it fixes the issue? Sorry to be a pain, just really want to learn the reasons behind so I don't keep making mistakes and so I can apply it to different instances.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Display:block on the anchors allow for vertical padding which you set on the anchors.

    However once you set that then the <li>'s will appear on different rows even though you set dispay:inline on them. THus the float:left is needed.

    Since you floated the <li>'s the parent has collapsed in height and needs a clearing mechanism placed on it. Overflow:hidden does that .

    Generally, learn to float instead of display:inline and then remember to use a clearing mechanism (if you need somehting hanging out of the container then overflow:Hidden wont be the best choice, google the "clearfix technique" instead .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Display:block on the anchors allow for vertical padding which you set on the anchors.
    Did you mean vertical margins?

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    That too but he set vertical padding on the anchors, so I meant what I said and I said waht I meant .
    Edit:

    I love when I get no sleep at night
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I mean the real issue was that since the <li> was an inline element via display:inline it wasn't able to have the anchor contained within it a different way (aka what I posted) is needed..college is having me do all nighters..no sleep
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    Thought college was supposed to be All Party.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    On friday/saturday I spent 1 night partying one night studying..this weekend I had friday be my party night and last night study/write papers/homework all night
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot Ryan, that's a great help, I really appreciate it

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad to help
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •