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 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2005
    Location
    Massachusetts, US
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Problems with some simple CSS...

    I'm pretty new to CSS and am trying to learn it so I can start using it as the base to any future websites I make.

    I was trying to re-create a simple HTML element I had used a table for with CSS, and ran into two big problems that I can't figure out. Doing something like this with CSS should be pretty easy (or I thought :\).

    What I am doing is re-creating a table that holds the title for each page. The old table had 3 colums, two held the images for the side tabs of the table, and the middle held the actual text.

    I am using what it comes out to look like (you'll see in the attached images) as the background image for the text. Here is the code I am using...

    Code:
    <html>
    <head>
    <style type="text/css">
    <!--
    body {color: #FFFFFF; background: #222222;}
    .title {width: 518; height: 16; background: url(topbg.jpg);}
    .title div {margin: 2px 5px 2px 20px; font-size: 7pt; font-family: verdana;}
    -->
    </style>
    </head>
    <body>
    <div class="title"><div>Testing....</div></div>
    </body>
    </html>
    "topbg.jpg" is the entire thing as a background instead of using seperate images in a table to get the tabs. I need to use padding for the text which is held in "title.div" to make it go down and to the left so it is where it is supposed to be.

    Here is the problem. When I run it in IE, it looks perfect except the entire thing gets pished down (see attached image). When I run it in Firefox, it doesn't get pushed down, but the top margin doesn't appear at all.

    Any help in a way to code this with CSS is appreciated. Thanks.


  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try setting margin and padding to zero on your body element. Browsers often have different default styles for elements unless you explicitly set a value in your CSS. Also, unless a numeric value is zero, you must include the unit of measure, as with .title.

    You'll probably want to read up on DOCTYPE's too, there's a sticky thread at the top of the HTML/CSS forum. Using the correct DOCTYPE is one step towards getting browsers to render your pages more predictably.

    Unless it serves some other purpose later-on, you probably don't need the inner div and can combine the style rules.
    Code:
    <html>
    <head>
    <style type="text/css">
    <!--
    body {color: #FFFFFF; background: #222222;}
    .title {width: 518px; height: 16px; background: url(topbg.jpg); margin: 2px 5px 2px 20px; font-size: 7pt; font-family: verdana;}
    -->
    </style>
    </head>
    <body>
    <div class="title">Testing....</div>
    </body>
    </html>
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #3
    New Coder
    Join Date
    Apr 2005
    Location
    Massachusetts, US
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks alot for the help.

    Much appreciated .


  •  

    Posting Permissions

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