Support Forum » Style Master

Cross-browser problem - Margin space different

(4 posts)
  • Started 2 years ago by Koolsteve
  • Latest reply from Koolsteve

  1. Koolsteve
    Member

    Hi all,

    I've build a holding page for a site which is experiencing a slight Cross-browser problem.

    If you view the page at:
    http://www.metamotion.co.uk/apartment/index.html

    You will notice that when viewed in Explorer and Firefox, the space between the bottom of the main picture and top of the first line of type varies slightly.

    Because the line of type was hard up against the picture in Explorer (not Firefox) I increased the space using Margin.

    Do I have to except this as an OK - it still looks alright in both Browsers? Or is there something different I could do to make the space more consistent across both Browsers?

    By the way, this is first attempt using SM/CSS/XHTML.

    Look forward to your reply,
    Koolsteve.

    Posted: 2 years #

  2. Cary
    Member

    I couldn't see where you might have added a top margin to increase the space. The styling indicates you used a top relative position of 8px to shift the text down.

    Different browsers don't always have the same default margins and padding for the same elements such as divs or paragraphs, so you can explicitly set the margins and padding in such cases to make them look more alike from one browser to the next if needed.

    I would suggest you use this styling for #main-text instead of what you currently have. The top and bottom margins still won't be perfect, but it's closer and the text at the bottom of the page won't disappear the way it is in IE 6.

    #main-text {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: auto;
    margin-left: auto;
    width: 770px;
    }

    Setting the left and right margins to "auto" will center an element in the window or parent element as long as the element has a width. Do the same for the other elements on the page which need centering like this:

    #flags {
    height: 67px;
    background-image: url(images/flags.jpg);
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    width: 770px;
    background-position: right;
    }

    #header {
    color: #918231;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.8em;
    padding-bottom: 10px;
    text-align: right;
    margin-left: auto;
    margin-right: auto;
    width: 770px;
    }

    #inner-image {
    height: 506px;
    background-image: url(images/centre_image_1.jpg);
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    width: 770px;
    }

    There are four validation errors on the page as well which you should fix.

    Since you are using xhtml, your opening html tag should look like this:

    <html xmlns="http://www.w3.org/1999/xhtml">

    The very last closing div on the page should be removed because it doesn't go with anything. There's no opening div for it to close.

    Also, your two anchor closing tags, </A>, should be lowercase since your page is xhtml.

    Posted: 2 years #

  3. Koolsteve
    Member

    Cary,

    I'll make changes as your instructions.

    Many thanks for your assistance.
    Koolsteve.

    Posted: 2 years #

  4. Koolsteve
    Member

    Cary,

    Changes have been made and the page works like a dream in Explorer and Firefox - Great!

    Only one thing different to your instructions:
    Left Margin 208px. This is because it needs to be a fixed width as a Nav Bar will be placed along side left of main picture.

    Many thanks,
    Steve.

    Posted: 2 years #

RSS feed for this topic

Reply

You must log in to post.

0.055 - 9 queries