CSS Padding problems in Safari

[66217]

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;
}

 

[italiano40]

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

 

[66217]

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

And at what step do you make this?

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

Thanks in advance.

 

[InLikeALion]

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.

 

[InLikeALion]

And at what step do you make this?

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

Thanks in advance.

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.

 

[Eraserhead]

I'm sure padding is supported in Safari...

What version of Safari are you using?

 

[66217]

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)

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?

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.

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.

 

[66217]

I applaud your decision to learn to hand-code. It really is simple and fun once you get into it a bit.

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.

Another hint would be to give a lot of thought to how you will organize your code.

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.

I'm sure padding is supported in Safari...

What version of Safari are you using?

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.

 

[dejo]

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):

<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.

 

[InLikeALion]

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?

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.

 

[InLikeALion]

Roco,

Here is a link to help you think about your naming conventions, etc.. written by Jina Bolton, one of the top names in web tech/standards:

http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets

Aparently, she has started a site to include her further thoughts on the subject:

http://creatingsexystylesheets.com/