CSS Padding problems in Safari

Discussion in 'Web Design and Development' started by 66217, Jun 25, 2008.

  1. 66217 Guest

    Joined:
    Jan 30, 2006
    #1
    So I finally decided to learn to hand-code, and to my surprise, it is not difficult at all to grab the basics.

    Currently I am just learning how everything works, but I have found this problem. When I add padding, it won't appear at all in Safari, but it works perfectly in Firefox.

    Here are some screenshots:

    First image is DW, second Safari and last is Firefox.

    This is the code I used in my .css file:
    h1 {
    background-color: black;
    color: white;
    padding: 20px;
    }
     

    Attached Files:

  2. italiano40 macrumors 65816

    italiano40

    Joined:
    Oct 7, 2007
    Location:
    NY
    #2
    yea that is why i have javascript detect the broswer and have it switch it to the correct CSS file that shows up, that is how CSS works not every browse see it in the same way
     
  3. 66217 thread starter Guest

    Joined:
    Jan 30, 2006
    #3
    And at what step do you make this?

    Also, I am still completely unaware of what JavaScript is.:eek: How does this works?

    Thanks in advance.
     
  4. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #4
    These browser differences which you will learn about (wait till you test things in IE 6, you'll see why we all fuss about it), are why it's a good reason to include a "reset" at the beginning of your style. I modify eric meyers, which you can find here:

    http://meyerweb.com/eric/tools/css/reset

    Not saying this padding issue will be solved by using this, but the idea is that different browser makers make their own decisions on how each html element should look by default, but a reset puts everything "back to zero", so you can then specifically control how your code displays.
     
  5. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #5
    I applaud your decision to learn to hand-code. It really is simple and fun once you get into it a bit. I would maybe suggest you don't worry too much about learning to code javascript for just a little bit - maybe a few months? or maybe not till after you've completed a few project sites.

    I'm suggesting you focus on learning the ins and outs of css and html, then when you have those basics down to a comfortable level, add javascript to the mix. It's not that hard, but trying too many things at once can sabotage things sometimes.

    Another hint would be to give a lot of thought to how you will organize your code. It's easy to not concern yourself with that aspect at first, but in retrospect you will wish you had. A buzzword to keep an eye out for is semantics, and if you see some good blogs explaining it, they will really help you in the long run.
     
  6. Eraserhead macrumors G4

    Eraserhead

    Joined:
    Nov 3, 2005
    Location:
    UK
    #6
    I'm sure padding is supported in Safari...

    What version of Safari are you using?
     
  7. 66217 thread starter Guest

    Joined:
    Jan 30, 2006
    #7
    Now that you bring up that, how do you test if the page would work in IE6? Is there any kind of emulator? OR do you constantly make trips to a PC?

    I copied what came in the link and it worked! But I don't have even a slight clue on what I just did. What does that code makes?

    Thanks a lot.

    EDIT: Now I'm not sure what worked. I emptied the cache in Safari and it worked without that code from the link.
     
  8. 66217 thread starter Guest

    Joined:
    Jan 30, 2006
    #8
    I am surprised that I think exactly the same, it is indeed fun to learn to do it. Besides, even with the simple things I am currently making, I feel proud of them. Something that didn't happend when doing this in iWeb for example.:)

    Yeah, it is one thing that is starting to bug me. Every page I visit now I go and see the source, and it completely freaks me out the amount of coding I see.

    Safari 3. With the latest update. But it seems the problem was that I had to empty the cache.


    BTW, for anyone trying to get the basics of CSS and XHTML, this book is amazing: Build Your Own Website The Right Way Using HTML & CSS by Ian Lloyd.
     
  9. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #9
    What version of Safari are you running? And can you include the HTML and CSS files as code-blocks? I tried a quick test based on your CSS and this seems to work fine (in Safari 3.0.4):

    Code:
    <html>
    <head>
    <style>
    h1 {
    	background-color: black;
    	color: white;
    	padding: 20px;
    }
    </style>
    </head>
    
    <body>
    
    <div id="header">
    	<div id="marca">
    		<h1>Intellivision</h1>
    	</div>
    	<div id="submarca">
    		<p><em>Le mejor</em></p>
    	</div>
    </div>
    
    </body>
    EDIT: Nevermind. Seems you've figured out the issue.
     

    Attached Files:

  10. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #10
    Well, that's why Intel powered macs and vmware/parallels has been such a game-changer for web-designers. We can now actually launch real windows and view our sites on the fly with IE 6 or 7.

    At work, however, our 2 machines with parallels/XP have had their windows installation die for various reasons (dead hdd on one, parallels screw-up on the other), so I've been using http://browsershots.org which runs vmware installations of 'all' browsers and returns screen shots of any given web page. It is slow, and you're viewing an image, not the actual page, so it has its limitations, but certainly helps if you can't run windows.
     
  11. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #11

Share This Page