Results 1 to 9 of 9
  1. #1
    4 Star Lounger
    Join Date
    Jan 2002
    Location
    Brookings, South Dakota, USA
    Posts
    449
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Display discrepancies between browsers

    Hi All,
    I'm having some display discrepancies between Firefox 1.5.0.4 and IE 6.0 (and IE 7 beta 3 as well, but.....). The website is Sit On A Beach and the problems are on the Search Results page.
    Please enter the following criteria into the questionaire and don't forget to Save and Continue after each entry <img src=/S/angel.gif border=0 alt=angel width=15 height=21>

    Islands: --ANY--
    Island Niches: Great Diving
    Hotel Niches: Adventure Tours
    Amenities: Air Conditioning and Wedding Planner
    Hotel Type: Luxury Villa
    Rates: $75 - $125

    (you should have 4 records returned)
    You'll notice the lines which separate the individual results are present in both IE6 and IE7, but the spaces do not collapse in places where there is no data; i.e. Name2, Address2; as they do in Firefox. In Firefox, the lines which are "supposed to" separate the returned records, seem to be bunched up under the title "Search Results", but the spaces between data lines have collapsed.
    I want the lines placed as in the IE browsers and the spaces collapsed as in Firefox.

    I've tried moving the[*] tag to the end of the previous line; e.g.
    <ul>something[*]
    some list something[*]
    some other list something[*]
    etc......
    as well as some other attempts at rectifying this, but no luck.
    I know there are more little gotcha's in these pages, but I think I can deal with them after this.
    Attached please find the css page (as a text file)
    I any other info is needed, please do not hesitate to ask. (as if this statement is really necessary in the lounge) <img src=/S/evilgrin.gif border=0 alt=evilgrin width=15 height=15>
    Thanks.
    Attached Files Attached Files
    <IMG SRC=http://www.wopr.com/w3tuserpics/gdrezek_sig.jpg>
    "Those who dance are considered insane by those who can't hear the music" - George Carlin

  2. #2
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Display discrepancies between browsers

    If you want to see something scary, in Firefox, choose View > Page Style > No Style. Ugh, the lists are funky. Those empty[*] elements are what are causing you blank lines in IE. Can you tighten up your ASP to get rid of them?

    To show bottom borders on the div.resultsbody parts in Firefox, you need to clear floats before each one. Add <code>clear:both;</code>
    to your style rules for that class.

    (Here's a saved copy of the page for style play.)
    Attached Files Attached Files

  3. #3
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Display discrepancies between browsers

    Hi there

    I made these changes and got a very similar look and feel for FF and IE:

    .resultsbody
    {
    FONT-SIZE: x-small;
    MARGIN: 0px;
    BORDER-BOTTOM: #598eff 1px solid;
    LIST-STYLE-TYPE: none;
    TEXT-ALIGN: center;
    clear: both;
    padding: 0px;
    }
    .resultsbody UL
    {
    FONT-WEIGHT: bolder;
    FONT-SIZE: x-small;
    MARGIN: 0px;
    COLOR: #000000;
    FONT-FAMILY: Verdana, Tahoma, Arial;
    LIST-STYLE-TYPE: none;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: left;
    padding: 5px 0px;
    }

    Got to say the site is looking really good now......I must say the menu are pretty cool <img src=/S/innocent.gif border=0 alt=innocent width=20 height=20> <img src=/S/grin.gif border=0 alt=grin width=15 height=15>
    Jerry

  4. #4
    4 Star Lounger
    Join Date
    Jan 2002
    Location
    Brookings, South Dakota, USA
    Posts
    449
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Display discrepancies between browsers

    Hi Jefferson,
    You're right....UGH.....
    I'd forgotten about the Firefox setting of "no-style".
    In order to cleanup the list elements I suppose I'll use If...Then statements to display or not display.
    But.......I thought that I had, at one time, run across a way to collapse the list elements if there were no data displayed. It was in the way the code was written/formatted, or something of that nature, on the web page, but of course I haven't been able to find it. Do you have any clue as to what I may have seen?? <img src=/S/crossfingers.gif border=0 alt=crossfingers width=17 height=16>

    Also, I noticed that the lines go to the left edge of the screen in Firefox, but remain "centered" in IE as I wish the lines to be. Any quick fixes there?

    Thanks again
    <IMG SRC=http://www.wopr.com/w3tuserpics/gdrezek_sig.jpg>
    "Those who dance are considered insane by those who can't hear the music" - George Carlin

  5. #5
    4 Star Lounger
    Join Date
    Jan 2002
    Location
    Brookings, South Dakota, USA
    Posts
    449
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Display discrepancies between browsers

    <hr>......I must say the menu are pretty cool<hr>
    Yeah they are........nice of you to notice........I had some "bear-y" good help with them. <img src=/S/ribbon.gif border=0 alt=ribbon width=15 height=15> <img src=/S/thumbup.gif border=0 alt=thumbup width=15 height=15>

    Any hints on the line centering?...as mentioned in my reply to Jefferson?
    I've also got some browser display issues when there are quite a number of returned results. The footer gets misplaced as do the <Back> and <Save and Continue> buttons, not to mentioned that the background color (that sandy-type of color I'm using) will sometimes not go the length of the displayed results.......but these may/will be for another post if/when I cannot get everything uniform. <img src=/S/crazy.gif border=0 alt=crazy width=15 height=15>
    Thank you.
    <IMG SRC=http://www.wopr.com/w3tuserpics/gdrezek_sig.jpg>
    "Those who dance are considered insane by those who can't hear the music" - George Carlin

  6. #6
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Display discrepancies between browsers

    The class="resultsbody" divs consume the full width of the class="bodybody" div. In IE, the class="bodybody" div somehow has blank left and right margins. In Firefox , it doesn't. I didn't read all the CSS to figure out why. Too much CSS, too little time. <img src=/S/wink.gif border=0 alt=wink width=15 height=15>

    In poking around, it appears Firefox is collapsing the resultsbody divs to a single line. Something in this article might explain why that is happening: Containing Floats (Complex Spiral Consulting).

  7. #7
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Display discrepancies between browsers

    Hi Gary

    Right this is one of those embarrassing moments when I seemed to have fixed the problem but can't remember how I did it. I went off into a CSS cleaning frenzy and then it seemed to work <img src=/S/blush.gif border=0 alt=blush width=15 height=15>

    I seem to rememeber getting rid of margin-left and margin-right on bodybody and then after that it goes a bit fuzzy <img src=/S/grin.gif border=0 alt=grin width=15 height=15>. I got rather annoted [gggrrrr smiley] with the nasty spacer div you created and decided to change your resultleftleft (cor, you choose some funny names <img src=/S/grin.gif border=0 alt=grin width=15 height=15>) and just let it have a padding of 3 ems...does the job just as well and makes your html tidier <img src=/S/yep.gif border=0 alt=yep width=15 height=15>


    I have attached my sample in a zip for you to look at and if you are brave compare my guests file with yours
    Jerry

  8. #8
    4 Star Lounger
    Join Date
    Jan 2002
    Location
    Brookings, South Dakota, USA
    Posts
    449
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Display discrepancies between browsers

    Thanks Jerry,
    Sorry, the "nasty" spacer div was a quick fix 'cause IE messed up the padding and margins whenever I tried to set them. <img src=/S/angel.gif border=0 alt=angel width=15 height=21>
    I'll certainly go through your sample and compare and clean things up and see what becomes.........*also* when I get some time I really should clean out the garbage within the css file as well so it holds ONLY the settings which are used.

    <img src=/S/time.gif border=0 alt=time width=32 height=48> .....anyone want to lobby for more usable hours in a day???? I don't, but I sure do need them. <img src=/S/drop.gif border=0 alt=drop width=23 height=23> <img src=/S/snore.gif border=0 alt=snore width=32 height=15>
    <IMG SRC=http://www.wopr.com/w3tuserpics/gdrezek_sig.jpg>
    "Those who dance are considered insane by those who can't hear the music" - George Carlin

  9. #9
    4 Star Lounger
    Join Date
    Jan 2002
    Location
    Brookings, South Dakota, USA
    Posts
    449
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Display discrepancies between browsers

    <hr>Too much CSS, too little time.*<hr>
    *see my reply to Jezza

    Thanks Jefferson,
    I vaguely remember reading something about containing floats....I don't know if it was the same link you've pointed out, but it is (AGAIN) something I placed into my memory for future reference that got lost........
    Dang, there's justa ton of stuff that needs to be kept straight....... <img src=/S/hmmn.gif border=0 alt=hmmn width=15 height=15> that pertains to coding as well doesn't it???
    Thanks again.
    <IMG SRC=http://www.wopr.com/w3tuserpics/gdrezek_sig.jpg>
    "Those who dance are considered insane by those who can't hear the music" - George Carlin

Posting Permissions

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