dcsimg
www.webdeveloper.com
Results 1 to 13 of 13

Thread: conversion to xhtml, alignment prob.

  1. #1
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133

    Question conversion to xhtml, alignment prob.

    Well I've gotten back to working on my website to be, and again have come up with problems. Also again, the problems deal with alignment.

    my top-right links need to be right aligned, and of course they only do so in IE due to the text-align:right bug. So, some help there would be appreciated.

    Also, I'm trying to figure out how to section off the large posting section. I think I might have problems like i do with the header on top, not sure though.

    the page i'm converting from is here:
    http://www.geocities.com/manhattanse...ree/test3.html

    The page i'm converting to is here:
    http://www.geocities.com/manhattanse.../template.html

    My many thanks go out to all of you who keep helping me with this... :-)

  2. #2
    Join Date
    Nov 2002
    Posts
    984
    Doesn't a simple

    .topSection div {text-align:right}

    do what you want?
    // Stefan Huszics

  3. #3
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    apparently not...

    It's in there and isn't working now... so I dunno...

  4. #4
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by thejoker101

    It's in there and isn't working now... so I dunno...
    No, you got

    .topSection img {
    border-width:0px;
    display:block;
    text-align:right;
    }

    That is VERY different from

    .topSection div {text-align:right}
    // Stefan Huszics

  5. #5
    celebguy_dv Guest

  6. #6
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    Unless I missed it, yet again, which is entirely possible, I made the change, and still have the problem...

  7. #7
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by thejoker101
    Unless I missed it, yet again, which is entirely possible, I made the change, and still have the problem...
    You need to remove the .topSection img {display:block} rule of cource, or text-align:right on the div will have no effect.
    // Stefan Huszics

  8. #8
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    The problem now is that I get spacing underneath the images, I believe this is the problem netscape has with images. Having the display:block fixed that...

  9. #9
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    it otherwise looks fine in IE and Opera, but netscape, those spaces under the images...

  10. #10
    Join Date
    Nov 2002
    Posts
    984
    img {vertical-align:bottom;} should fix the spaces for inline images
    // Stefan Huszics

  11. #11
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    That changed a couple things.

    1) in netscape only the images that weren't used as links moved up, but it seemed to be a step in the right direction.

    2) in opera, when i mouse over a link, i get a purple bar covering the images not used as links.

    3) in ie i get spacing below the images not used as links

    So I dunno, it's starting to seem like it's not possible...

  12. #12
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by thejoker101
    That changed a couple things.

    1) in netscape only the images that weren't used as links moved up, but it seemed to be a step in the right direction.
    I would assume all images would be affected, but you might have some other rule overriding it somewhere in your CSS file.
    As a fist step you could try to also specify it for
    a img { }

    2) in opera, when i mouse over a link, i get a purple bar covering the images not used as links.
    ?
    Which version of Opera and does every single image on the page get a purple bar over it when you mouse over a link?

    3) in ie i get spacing below the images not used as links
    Again which version and does it come from removing display block or from adding vertical-align:bottom ?
    I know IE is a bit buggy with vertical align, but I don't recall bumping into anything that was not fixable in it, so it should work one way or the other.

    In any case, I don't have time nor access to multiple browsers untill this weekend so unfortunately I can't test stuff out for you until then.
    // Stefan Huszics

  13. #13
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    For reference, I'm using IE 6, Opera 7, and NS 7.01.

    I tried your suggestion with a img {vertical-align:bottom;} to no avail. I also tried going into the html and adding a style="vertical-align:bottom" on the images that were messing up, both the ones used as links and those not, it didn't change anything.

    With opera, no, not every image gets a purple bar over it, on the page, on the top right section, when i mouse over either, "about 17", "sitemap", "favorite" a solid purple bar, the size of the image between those linked pictures, occurs over that image between them.

    The problems of extra space seem to come from the vertical-align. if i remove the vertical-align and add the display:block, everything is perfect, except in Opera and NS the links are aligned to the left instead of the right. However when i remove the display block, the links are pushed to the right but there is spacing between all the images. when i add the vertical-align:bottom, only some of the spacing is taken care of.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles