Big problem with CSS and Dreamweaver - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Big problem with CSS and Dreamweaver

dispersee

11:23 pm on Jun 23, 2005 (gmt 0)

10+ Year Member

Now, I am a little bit new to CSS but I've recently read lots of stuff on the subject. What I want to do is to completely remove tables and use only CSS for my designs. I am using Dreamweaver MX 2004 which has e pretty extensive list of CSS abilities and that's why I chose it. Unfortunately, I have a problem (which should be probably easily solved) that keeps annoying me from the start--it's the creation of a CSS layer (a.k.a. assigning a <div> tag to a number of objects and then applying a style by using an ID selector like #sidebar, #navbar etc.). Unfortunately, even though I don't set specific hight and width for the layer, browsers (IE and Opera) always put some kind of padding from the top and from the bottom inside the layer.

Here is how the page looks in Dreamweaver (the way it should): <snip>

However, look at how IE shows it: <snip>

The same problem in Opera too: <snip>

My HTML is completely simple and innocent:


<body>
<div id="sidebar">
 <p>Introduction</p>
 <p>Text 1 </p>
 <p>Text 2 <br>
 &nbsp;&nbsp;Subtext 1 <br>
 &nbsp;&nbsp;Subtext 2 </p>
</div>
</body>
</html>

My CSS style is also free of any specific settings. That's the external style sheet:


body {
font-family: Arial, Helvetica, sans-serif;
}
#sidebar {
background-color: #00CCFF;
border: dashed #CCCCCC;
font-size: small;
left: 5px;
top: 5px;
}

I really can't understand where that inserted space comes from--there aren't any spaces, returns, padding or something like that (just look at the code). The only option that is set is the positioning which concerns the whole layer (not what's inside it). I appreciate any help--this is really holding me back at the moment.

Thanks in advance!

[edited by: Woz at 8:21 am (utc) on June 24, 2005]
[edit reason] No URLs please, see Tos#13 [/edit]

rocknbil

1:02 am on Jun 24, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Did you try

padding:0;
margin:0;

or
padding-top:0px; padding-bottom:0px;
margin-top:0px; margin-bottom:0px;

?

Also you might want to Google for "Box Model" there are a series of problems, mostly with I.E., and fixes (well, hacks anyway) for it.

Also you should probably review the TOS you agreed to, welcome aboard! :-)

collymellon

1:11 am on Jun 24, 2005 (gmt 0)

10+ Year Member

I am no expert yet at CSS but this will get you on track for now - until someone explains a better solution than this:

clear the margins on the <p> text:

body{
font-family: Arial, Helvetica, sans-serif;
}

#sidebar{
background-color: #00CCFF;
border: dashed #CCCCCC;
font-size: small;
left: 5px;
top: 5px;
}

p{
margin-top: 0;
margin-bottom: 0;
}

Then add a couple of <br> to the html:

<div id="sidebar">
<p>Introduction</p>
<p><br>
Text 1 </p>
<p><br>
Text 2 <br>
  Subtext 1 <br>
  Subtext 2 </p>
</div>

This should be looking how you want. I'm guessing you have used the top/left properties to get a centered look on the div, with a couple of tweaks to the CSS this can be done by default:

Add text-align:center; to the body - any text/ containers etc will be center aligned.

body{
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}

Add text-align:left; to the sidebar div, if not the text will center from the body.

#sidebar{
background-color: #00CCFF;
border: dashed #CCCCCC;
font-size: small;
text-align: left;
}

Hope this helps..

dispersee

11:17 am on Jun 24, 2005 (gmt 0)

10+ Year Member

Thanks a lot guys, I really appreciate your help! The problem obviously came from the lack of specification. When I set the padding of the <p> tag to 0px everything came back to normal. It's strange that CSS doesn't automatically allign text. I guess I have to specify everything in CSS, or otherwise browsers will take very bad decisions. Haha

Thanks once again!

Great community here!

chunk_split

11:47 pm on Jun 25, 2005 (gmt 0)

10+ Year Member

One of the best things you can do is use the universal selector (*) to set the padding and margins of all your elements at the begining of your style sheet.

* {margin:0;padding:0;}

Also you can use short-hand for padding and margins.

instead of this,

body {margin-top:10px;margin-right:8px;margin-bottom:0;margin-left:6px;}

You can do this,

body {margin:10px 8px 0 6px;}

jetboy

10:40 am on Jun 27, 2005 (gmt 0)

10+ Year Member

One of the best things you can do is use the universal selector (*) to set the padding and margins of all your elements at the begining of your style sheet.

Margin, yes, but there are issues with doing the same for padding which only become apparent later on. Such as Mozilla using padding in the <option> element for default positioning. To get <select>s to display properly you have to feed this padding back to *Mozilla only*.

Better to go for something like:

* {
margin: 0;
}

body, fieldset, legend, ol, ul, th, td {
padding: 0;
}