...

View Full Version : CSS problem, seems to work in Dreamweaver but not browser



JumpJump
12-11-2010, 06:57 AM
Hi,

I'm trying to convert most of my tables to divs and external css. But I'm having some trouble.

The page seems to work perfectly in the design window of Dreamweaver, but in browsers (firefox and chrome) it's all over the place.

I'm new to css and divs, I appreciate any help at all.

It's not the font colors, etc, that I'm talking about, just the layout of the divs. The <hr size="1" /> isn't even showing up, either.

I've attached a screenshot of the (correct) layout in Dreamweaver.

The css file is http://www.basentana.com/css/style1.css
The page is http://www.basentana.com/pastproductions2.html

abduraooft
12-11-2010, 08:04 AM
Validate and fix the errors in your markup first ,see http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.basentana.com%2Fpastproductions2.html

Excavator
12-11-2010, 08:42 AM
Hello JumpJump,
Ab is right, the first step would be to validate and fix all the errors you possibly can. See the links about validation in my signature line. There is a validator for CSS and one for markup.

There are some other things you need to fix too. You still have tables there, might as well jump in and go all the way ... if you're getting rid of tables just get rid of all of them.

Your #header is set at height: 34px; but you put 51px high logo.jpg in it. Then your hr after than adds even more. The box model (http://www.w3.org/TR/CSS2/box.html) shows how what's contained in a div element cannot be bigger than that div. Margin/padding/border all count when figuring sizes.

Try making these two changes to your CSS -

/*div {
margin-left: auto;
margin-right: auto;
margin: 0px;
width: 50em;
}*/
#header {
background: #000;
width: 551px;
/*height: 34px;*/
}

JumpJump
12-11-2010, 08:42 AM
edit edit

Excavator
12-11-2010, 08:43 AM
Okay, done. But it's still all over the place.

Wow, fast work on the valid code there - good job :thumbsup:

JumpJump
12-11-2010, 09:50 AM
I've resolved most of the layout issues.

I can't seem to vertically align #secondarypic, though. I'm trying to place it in the middle of its div.

Also (not a css or html issue I know, but its only arisen since this css rewrite) my javascript on the sidebar mouseovers isn't working anymore.


You still have tables there, might as well jump in and go all the way ... if you're getting rid of tables just get rid of all of them.
I put that one table in there in order to hold the divs and centre the page. I couldn't find any reliable way to centre the floated divs.

Thanks for your help.

abduraooft
12-11-2010, 10:42 AM
Also (not a css or html issue I know, but its only arisen since this css rewrite) my javascript on the sidebar mouseovers isn't working anymore. Firebug (http://getfirebug.com) says
handleOut2 is not defined
pastpr...s2.html (line 1)
handleOut7 is not defined
pastpr...s2.html (line 1)
handleOver4 is not defined
pastpr...s2.html (line 1)
handleOut4 is not defined
pastpr...s2.html (line 1)
handleOver3 is not defined
pastpr...s2.html (line 1)
handleOut3 is not defined
pastpr...s2.html (line 1)
handleOver4 is not defined

.............. when I hover on the menu items.

PS: Make use of CSS to show the hover effect, which is more reliable than a javascript effect.

Excavator
12-11-2010, 10:47 AM
I put that one table in there in order to hold the divs and centre the page. I couldn't find any reliable way to centre the floated divs.


To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto


So if you wrap your #header, #menu and #main in a containing div, set a width that everything fits in and follow the above steps, you can center your site with CSS and no tables.

Excavator
12-11-2010, 11:02 AM
I've resolved most of the layout issues.

I can't seem to vertically align #secondarypic, though. I'm trying to place it in the middle of its div.

#secondarypic is 130x350 but Fotolia_4225324_XS-1.jpg is 233x269

Look at it this way to show what's happening there -

#secondarypic {
background: #000;
width: 130px;
height: 250px;
vertical-align:bottom;
float: left;
border: 2px solid #0f0;
}

------------------
Instead, lose that div alltogether and style the image itself like this -
some new markup -
re the nearest brothel is. Can Bien pull herself and grand mother out of their dark predicament? Well, under Jodette’s tutelage, Bien sensationalizes the Parisian men and with that comes power in which these two women know exactly how to use it! </p>
</div>

<img src="images/Fotolia_4225324_XS-1.jpg" alt="" id="secondarypic">

</div>

</td></tr></tbody></table>


And some new CSS -

#main {
background:none;
width: 525px;
/*height: 300px;*/
float:left;
background-color:#000;
}
#secondarypic {
width: 233px;
height: 269px;
float: right;
/*border: 2px solid #0f0;
background: #000;
vertical-align:bottom;*/
}



That's still not right I know. To get it to move up you will need to change its location in the markup - floats come first.
I also didn't clear the floats in #main...

At least you can see how not everything needs to be in a div but everything in a div needs to fit in that div. See box model here (http://www.w3.org/TR/CSS2/box.html).

JumpJump
12-12-2010, 02:31 AM
Everything resolved for now. Thanks a lot.

Excavator
12-12-2010, 02:53 AM
Everything resolved for now. Thanks a lot.

ehh, not quite.
The validator finds a few errors that need fixed and quite a few that are easy fixes just to get your site valid.
See the links about validation in my signature line.

A couple other things:

Not clearing your floats may not cause any problems, or it might. I only point it out because it's apparent you don't know it's happening.

To illustrate, put temporary background colors on your containing elements and you will see they do not enclose their content at all.

Look at a CSS method of clearing floats here (http://www.quirksmode.org/css/clearing.html).

Like I said though, that may or may not even be an issue.

------------
Another thing I see is you set height: 300px; on #content but it's content is taller than that.
You also have #secondarypic set to width: 130px; but the image it contains is 141px wide.

The box model (http://www.w3.org/TR/CSS2/box.html) says that what you put inside a container cannot exceed the size of that container. margin/padding/border all count when figuring sizes.

-------------

That <br> between #filmtiltle and #content works but is not really semantic. Adding markup for presentation is another thing that isn't really going to break your page but doesn't need to be done.
Instead, add some bottom margin to #filmtitle and you'll have more control over the space between the two elements.

Overall though, it looks much better -- Great improvement!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum