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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Posts
    218
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question having trouble removing whitespace between images in my 100% CSS layout...

    Hey,

    i am designing my latest site in CSS and XHTML 1.1 strict to comply with the latest web standards. I have a concept of the site designed here: http://www.blueshiftdesigns.com/new_test/ but this concept version is a simple table based html 4.01 layout. That is how the ending CSS layout should look (more or less)

    In the CSS version: http://www.blueshiftdesigns.com/new_test/indexCSS.php i cannot get the images and the menu div down the left side (the blue section) to have no whitespace between them like in the table based layout. What am i doing wrong?

    Cheers

  • #2
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First off, congratulations on starting down the light side!

    How about setting the left hand side as one big div, then setting the background-image: to be a conglomerate of all your current images. This'll mean the content is completely seperated from the style (a good thing). One test to do on your page to see if the content is seperated from the style is to view it without CSS and see if it flows nicely, there are no images or colours in there, but all the content is.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #3
    Regular Coder
    Join Date
    Sep 2002
    Posts
    218
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well due to the way my site will scale infintely and still maintain the gradients, that is the most efficient way to make my site and its gradients scale correctly.

    Anyway, that doesnt help my problem with my unexplained gaps between images seperated with <br/> tags - any ideas??

    Cheers

  • #4
    Regular Coder
    Join Date
    Sep 2002
    Posts
    218
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ^^ bump ^^

    any suggestions would be massively apprteciated, this is my last hurdle in completing the layout phase of this design and it is still giving me this last headache.

    The url is: http://www.blueshiftdesigns.com/new_test/indexCSS.php (as above)

    All CSS code is easily visible via 'view source'

    EDIT: the site renders fine in Mozilla, the whitespace appears in IE...

    TIA
    Last edited by SpeedFreak; 12-27-2003 at 09:18 AM.

  • #5
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Strange... Try putting them all on one line? Like this:
    Code:
    <img /><img /><img />
    rather than
    Code:
    <img />
    <img />
    <img />
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #6
    Regular Coder
    Join Date
    Sep 2002
    Posts
    218
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hooray! that did it.

    I had to put all images and the start of the div tags on the same line to get IE to put no whitespace between them.

    silly non-compliance

    thanks me'

    Cheers

  • #7
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by SpeedFreak
    Hooray! that did it.
    Excellent! Strange how such a low-tech solution sometimes fixes strange things in IE! For example, setting position:relative on a containing element will solve around 50% of positioning problems for it's children!
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by me'
    For example, setting position:relative on a containing element will solve around 50% of positioning problems for it's children!
    And removing it will solve the other 50% ...
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #9
    Moderator
    Join Date
    May 2002
    Location
    Hayward, CA
    Posts
    1,459
    Thanks
    1
    Thanked 23 Times in 21 Posts
    Originally posted by me'
    Strange... Try putting them all on one line? Like this:
    Code:
    <img /><img /><img />
    rather than
    Code:
    <img />
    <img />
    <img />
    One of my dirty tricks which is legal XML and/or legal HTML is to put the closing portion of the tag on the next line:

    <img src="1.jpg"

    /><img src="2.jpg"

    />

    It makes the code a little harder to read, but not much.
    "The first step to confirming there is a bug in someone else's work is confirming there are no bugs in your own."
    June 30, 2001
    author, Verbosio prototype XML Editor
    author, JavaScript Developer's Dictionary
    https://alexvincent.us/blog


  •  

    Posting Permissions

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