SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Div Alignment lost after adding Image in another Div

    Hi Folks,

    In SeaMonkey 1.1.6. (probably Firefox too), if you look at the second page you will see that the text

    Hospedaje
    Familiar Ochoa
    and
    Sacred Valley Mountain Bike Tours


    is centre aligned within its Div as I want it to be.

    However, it is losing this alignment as you will see in the first link after adding the image in the Last Div.

    So, can anyone enlighten me as to what is going on? The same thing occurrs whether the Image is left or right aligned.

    It's appearing ok in IE6 and Opera 9.23.

    http://www.machawasi.com/HospedajeFamiliarOchoa1.htm

    http://www.machawasi.com/HospedajeFamiliarOchoa2.htm

    Thanks,

  2. #2
    Motivated Procrastinator seriocomic's Avatar
    Join Date
    Jan 2003
    Location
    Outside the bubble
    Posts
    1,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yikes! thats some scary code going on there!

    You have <div align=center> but that won't fix it for you, it's containing div must be told how to align its child elements (in this case span), then the span has to be told how to act with that alignment:

    Code CSS:
    #divTitle { text-align: center; }
    #divTitle span { margin: auto; }

    But in all honesty, the HTML and CSS need a LOT of work - at least you're not using tables!

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE will also be in quirks mode due to the incomplete doctype.....

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think the main problem is that you have floated this section without specifying a width and it is is confusing things. Add a width and the text will remain centred.

    Code:
        <div id=divTitleAndContactDetails style="FLOAT:left;width:293px">
    However as mentioned above that code is a bad mix of old an new and is running on an old doctype that will cause IE6 to be in quirks mode and use the broken box model.

    Also using javascript to create links for your main navigations is akin to suicide really. You should use anchors to create links because that's what they were designed for and no javascript is necessary to make the links work. The anchors can be styled to look like buttons quite easily.

    I can't believe you need all those hacks for opera and it's not a good idea to add hacks for anyone except IE.

    Hope that helps

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hi Mike,

    Quote Originally Posted by seriocomic View Post
    Yikes! thats some scary code going on there!

    You have <div align=center> but that won't fix it for you, it's containing div must be told how to align its child elements (in this case span), then the span has to be told how to act with that alignment:

    Code CSS:
    #divTitle { text-align: center; }
    #divTitle span { margin: auto; }

    But in all honesty, the HTML and CSS need a LOT of work - at least you're not using tables!
    It's still in development mode but in what way does it need a lot of work.

    I tried your suggestion. I removed align=center and inserted text-align: center into the Style attribute for the Div and I inserted margin: auto into the Style attribute for the Spans but it made no difference.

    Thanks,

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I tried your suggestion. I removed align=center and inserted text-align: center into the Style attribute for the Div and I inserted margin: auto into the Style attribute for the Spans but it made no difference.
    See my post above for the solution

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Hi Paul,

    Thanks for you reply. My expertise is with databases and my learning curve for HTML/CSS stuff is still very steep.

    Adding the Width did the trick.

    I have changed the Doctype to the following:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Will that circumvent the need for the Opera hacks I was using?

    I will look into changing the buttons to styled links. Something else to learn.

    Quote Originally Posted by Paul O'B View Post
    Hi,

    I think the main problem is that you have floated this section without specifying a width and it is is confusing things. Add a width and the text will remain centred.

    Code:
        <div id=divTitleAndContactDetails style="FLOAT:left;width:293px">
    However as mentioned above that code is a bad mix of old an new and is running on an old doctype that will cause IE6 to be in quirks mode and use the broken box model.

    Also using javascript to create links for your main navigations is akin to suicide really. You should use anchors to create links because that's what they were designed for and no javascript is necessary to make the links work. The anchors can be styled to look like buttons quite easily.

    I can't believe you need all those hacks for opera and it's not a good idea to add hacks for anyone except IE.

    Hope that helps

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Will that circumvent the need for the Opera hacks I was using?
    Download Opera and see for yourself

    If you still think you have a problem with Opera then post again once you have checked and explain what the problems are and we'll take a look

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hi again Paul,

    Quote Originally Posted by Paul O'B View Post
    Hi,

    Also using javascript to create links for your main navigations is akin to suicide really.
    Why is that?

    Also, what would I replace "history.back()" with for the Go Back button?

    Thanks,

  10. #10
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mtbvfr View Post
    Why is that?
    Anyone without javascript will not be able to navigate the site, and this includes search engine spiders.

    Quote Originally Posted by mtbvfr View Post
    Also, what would I replace "history.back()" with for the Go Back button?
    What is the point of a "back" button when it is about 2cm away from the browser's own back button ?


Bookmarks

Posting Permissions

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