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 13 of 13

Thread: Strange css?

  1. #1
    Regular Coder westmatrix99's Avatar
    Join Date
    Dec 2006
    Location
    South Africa
    Posts
    307
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Question Strange css?

    Any idea how to fix these "LINES" between my "divs"?
    This is the css code.
    PHP Code:
    <STYLE TYPE="text/css" MEDIA=screen>
    <!--
    div#fact p, div#fact h2 {
    margin-top0px;
    margin-bottom0px;
    color#fff;
    }
    div#fact {
    background-color#009def;
    color#fff;
    padding-left10px;
    padding-right10px;
    width160px;
    padding-top5px;
    padding-bottom10px;
    }
    -->
    </
    STYLE
    This is the div tags:
    PHP Code:
    <img src="images/top.gif" alt="" width="180" height="5"/>
    <
    div id="fact">
    <
    h2>Fact #1</h2>
    <p>Lorem ipsum dolor sit ametconsetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam eratsed diam voluptuaAt vero eos et accusam et justo duo dolores et ea rebumStet clita kasd gubergrenno sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      <
    br />
    </
    div>
    <
    img src="images/bottom.gif" width="180" height="5" alt="" /> 
    What could be the problem?
    Images attached...
    Attached Thumbnails Attached Thumbnails Strange css?-bottom.gif   Strange css?-top.gif  
    Thanks for you support!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,932
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    http://developer.mozilla.org/en/docs...ysterious_Gaps

    I’d suggest you put those images as background images since their only purpose is of stylistic nature and they don’t make any sense semantic wise (switch off styles and ponder about it). This would also get rid of that problem.

  • #3
    Regular Coder westmatrix99's Avatar
    Join Date
    Dec 2006
    Location
    South Africa
    Posts
    307
    Thanks
    12
    Thanked 0 Times in 0 Posts
    I had it working a couple of weeks ago and yesterday it stopped working.
    I hate css and it's methods of screwing up my designs, I would prefer to use tables, but want to figure this one out.

    Basically it worked and now it doesn't!
    Something changed in my css and I can't for the life of me find the fault or problem.

    Cheers
    West
    Thanks for you support!

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,932
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    CSS isn’t screwing up anything if the page well thought out and coded correctly. Did you read the link I provided? I suppose you’re experienceing exactly that problem but I don’t know for sure if we don’t get a link or the entire code posted here.

  • #5
    Regular Coder westmatrix99's Avatar
    Join Date
    Dec 2006
    Location
    South Africa
    Posts
    307
    Thanks
    12
    Thanked 0 Times in 0 Posts
    This is one page that I use to include on the other pages, where I would need them.
    Like I mentioned, it worked before and now it doesn't

    This is what I would include:
    Code:
    <STYLE TYPE="text/css" MEDIA=screen>
    <!--
    div#fact p, div#fact h2 {
    margin-top: 0px;
    margin-bottom: 0px;
    color: #fff;
    }
    div#fact {
    background-color: #009def;
    color: #fff;
    padding-left: 10px;
    padding-right: 10px;
    width: 160px;
    padding-top: 5px;
    padding-bottom: 10px;
    }
    -->
    </STYLE>  
    <img src="images/top.gif" alt="" width="160" height="5"/>
    <div id="fact">
    <h2>Fact #1</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      <br />
    </div>
    <img src="images/bottom.gif" width="160" height="5" alt="" />
    This is an entire page just to find the answer:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title></title>
    <
    STYLE TYPE="text/css" MEDIA=screen>
    <!--
    div#fact p, div#fact h2 {
    margin-top0px;
    margin-bottom0px;
    color#fff;
    }
    div#fact {
    background-color#009def;
    color#fff;
    padding-left10px;
    padding-right10px;
    width160px;
    padding-top5px;
    padding-bottom10px;
    }
    -->
    </
    STYLE>  
    </
    head>
    <
    body>
    <
    img src="images/top.gif" alt="" width="180" height="5"/>
    <
    div id="fact">
    <
    h2>Fact #1</h2>
    <p>Lorem ipsum dolor sit ametconsetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam eratsed diam voluptuaAt vero eos et accusam et justo duo dolores et ea rebumStet clita kasd gubergrenno sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      <
    br />
    </
    div>
    <
    img src="images/bottom.gif" width="180" height="5" alt="" /> 
     
    </
    body>
    </
    html
    Last edited by westmatrix99; 10-29-2007 at 12:59 PM.
    Thanks for you support!

  • #6
    Regular Coder westmatrix99's Avatar
    Join Date
    Dec 2006
    Location
    South Africa
    Posts
    307
    Thanks
    12
    Thanked 0 Times in 0 Posts
    In Firefox this works out perfect!
    In IE7 it sucks!
    Thanks for you support!

  • #7
    Regular Coder westmatrix99's Avatar
    Join Date
    Dec 2006
    Location
    South Africa
    Posts
    307
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    CSS isn’t screwing up anything if the page well thought out and coded correctly. Did you read the link I provided? I suppose you’re experienceing exactly that problem but I don’t know for sure if we don’t get a link or the entire code posted here.

    Yes I read parts of it and it concludes that Firefox is better than IE will ever be.
    Thanks for you support!

  • #8
    Regular Coder westmatrix99's Avatar
    Join Date
    Dec 2006
    Location
    South Africa
    Posts
    307
    Thanks
    12
    Thanked 0 Times in 0 Posts
    This was ODD!
    All I did was add "DIV" tags to the images, must have removed them while playing around.

    <div><img src="images/top.gif" alt="" width="160" height="5"/></div>

    Now it works again!

    Cheers and Thanks.
    Thanks for you support!

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,932
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Quote Originally Posted by westmatrix99 View Post
    Yes I read parts of it and it concludes that Firefox is better than IE will ever be.
    You should read all of it because I’m not posting things for the fun of it. I was actually supposed to solve your problem but whatever…

    It doesn’t conclude that Firefox is better than IE, it concludes that images have a space underneath them because they are inline elements and as such are treated like text. So in order to remove that space you have to make them display: block;. But why am I actually trying to help here? Obviously my efforts are being ignored…

  • Users who have thanked VIPStephan for this post:

    westmatrix99 (10-29-2007)

  • #10
    Regular Coder westmatrix99's Avatar
    Join Date
    Dec 2006
    Location
    South Africa
    Posts
    307
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Not true.
    Your efforts have helped me realize that I must have removed those "DIV" tags.

    I tried that CSS=> display: block;. but no luck man.
    Thanks for you support!

  • #11
    Regular Coder westmatrix99's Avatar
    Join Date
    Dec 2006
    Location
    South Africa
    Posts
    307
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Just testing that thing you did...
    <code style="background-color: #FFFFBB">display: block;</code>

    No luck!

    How did you get that line to be yellow or highlighted?
    Thanks for you support!

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,932
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Yeah, well, anyway… Didn’t test it myself, just guessed as this is the most common problem with images and gaps and making them display: block; usually solves it.
    The yellow highlighted code is done with the [icode][/icode] tags. There is also a button for that in the reply window, looking like '#i '.

  • #13
    Regular Coder westmatrix99's Avatar
    Join Date
    Dec 2006
    Location
    South Africa
    Posts
    307
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Thumbs up

    I saw that little '#i' thingy, don't want to mess with something I know nothing about.

    Thanks
    Cheers
    Thanks for you support!


  •  

    Posting Permissions

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