Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    66
    Thanks
    16
    Thanked 0 Times in 0 Posts

    CSS problem, seems to work in Dreamweaver but not browser

    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
    Attached Thumbnails Attached Thumbnails CSS problem, seems to work in Dreamweaver but not browser-screen-shot-2010-12-11-01.55.05-11-dec-2010.jpg  
    Last edited by JumpJump; 12-11-2010 at 07:08 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Validate and fix the errors in your markup first ,see http://validator.w3.org/check?verbos...ductions2.html
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 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 -
    Code:
    /*div {
    	margin-left: auto;
    	margin-right: auto;
    	margin: 0px;
    	width: 50em;
    }*/
    #header {
      background: #000;
      width: 551px;
      /*height: 34px;*/
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    JumpJump (12-11-2010)

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    66
    Thanks
    16
    Thanked 0 Times in 0 Posts
    edit edit

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by JumpJump View Post
    Okay, done. But it's still all over the place.
    Wow, fast work on the valid code there - good job
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    JumpJump (12-11-2010)

  • #6
    New Coder
    Join Date
    Dec 2010
    Posts
    66
    Thanks
    16
    Thanked 0 Times in 0 Posts
    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.

    Quote Originally Posted by Excavator
    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.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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 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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    JumpJump (12-12-2010)

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by JumpJump View Post
    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:
    1. a valid DocType
    2. an element with a width
    3. 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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by JumpJump View Post
    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 -
    Code:
    #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 -
    Code:
    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 -
    Code:
    #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.
    Last edited by Excavator; 12-11-2010 at 03:03 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    JumpJump (12-12-2010)

  • #10
    New Coder
    Join Date
    Dec 2010
    Posts
    66
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Everything resolved for now. Thanks a lot.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by JumpJump View Post
    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.

    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 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!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •