Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16
  1. #1
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    This drives me nuts! :angry:

    The following page (testbed for design) creates vastly different visual presentations depending on which browser you use.
    There's nothing fancy here, just standard CSS.

    If you view it in FireFox, it looks normal (or at least the way I intend it to be seen).

    Now try Opera, IE, Chrome or Safari. :alien:
    Every browser presents it differently! And when I say "differently", I mean totally messed up!
    What on earth is going on?

    I've seen different behaviour based on special HTML tags etc before, but this takes the price! There is no consistency what so ever!
    Normally, every browser presents the same (with the exception of IE which always tends to break things), but this is an all time low.
    Every browser presents this page wrong (except FF). And the errors are all in different places!

    Can anybody tell me what part of the code wreaks havoc?
    S. Rosland

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Hm. Other than some font issues, I've looked at it in Opera (9.27) and Konqueror (should be relatively similar to Safari) and it looks about identical. Have you tried using browsershots (http://browsershots.org/) to confirm your observations?

  4. #3
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Well this is probably nothing, but there is a div that is not closed properly. See the end div tag here:

    <div id="links">

    <a href="http://nordiskhundemassasjeskole.no">Hjem&nbsp;&nbsp; |&nbsp;&nbsp;</a>
    <a href="/nettbutikk/index.php">Nettbutikk &nbsp;&nbsp;|&nbsp;&nbsp;</a>
    <a href="/kurs/kurs.htm">Kurs&nbsp;&nbsp; |&nbsp;&nbsp;</a>
    <a href="/pamelding/pamelding.php">P&aring;melding &nbsp;&nbsp; |&nbsp;&nbsp;</a>
    <a href="/praktisk/praktisk.htm">Praktisk &nbsp;&nbsp; | &nbsp;&nbsp;</a>
    <a href="/kontakt/kontakt.php">Kontakt &nbsp;&nbsp; |&nbsp;&nbsp;</a>
    <a href="/galleri/galleri.php">Galleri &nbsp;&nbsp; | &nbsp;&nbsp; </a>
    <a href="/terapaut/terapaut.htm">Terapautens verden</a>
    </div

    Fix that first.
    Next, I would wrap your whole page in a container div and center it with margin: 0 auto. You have a bottom scroll bar right now and that's not what you want. Make that div with position relative. Then all your absolute positioned divs inside that will be positioned relative to the container div and not the browser window. You will have some adjustments to make for sure to fit it in the window and have your stuff in there the way you want it.
    This may not fix your problem but I bet it will help.

  5. #4
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Quote Originally Posted by Shadowfiend
    Hm. Other than some font issues, I've looked at it in Opera (9.27) and Konqueror (should be relatively similar to Safari) and it looks about identical. Have you tried using browsershots (http://browsershots.org/) to confirm your observations?
    It looks totally different in firefox and IE7.

  6. #5
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Quote Originally Posted by Shadowfiend
    Hm. Other than some font issues, I've looked at it in Opera (9.27) and Konqueror (should be relatively similar to Safari) and it looks about identical.
    I'll provide some screenshots to illustrate what I see. (thanks for the "browsershot.org" tip).

    Quote Originally Posted by aeroweb99
    Well this is probably nothing, but there is a div that is not closed properly.
    Thanks, I didn't see that, but unfortunately it didn't change anything.


    Quote Originally Posted by aeroweb99
    Next, I would wrap your whole page in a container div and center it with margin: 0 auto. You have a bottom scroll bar right now and that's not what you want. Make that div with position relative. Then all your absolute positioned divs inside that will be positioned relative to the container div and not the browser window. You will have some adjustments to make for sure to fit it in the window and have your stuff in there the way you want it.
    This may not fix your problem but I bet it will help.
    The page is not centered. It is positioned top left, so a centered container div would break the design.
    As far as I know, position:relativ on nested containers would not only position them according to the parent div, but also the content of the container div, which would make it extremely tricky to position the different elements the way I want.

    You see a horizontal scrollbar? I don't see one in any of the browsers I've tried? What resolution are you using?

    ------------------

    Attachments:

    FireFox
    Look at the screenshot in FF. That is how it's supposed to look.

    Chrome
    Chrome almost renders it identical, but does something weird with the first textlink in the navbar. The word "Hjem" goes purple and gets a horizontal line below it that stretches all the way to the next textlink. However, the rest of the textlinks displays normally.

    Opera
    Here the general layout of the page is displayed correctly, apart from the main content container that now has been indented right by quite a few pixels. The content of the header div and the main content div are positioned and displayed correctly within the containers themselves, but see what it does to the textlinks in the navbar!
    It's identical to Chrome's error, only now two links are affected! The funny part is that this error only affects the first and the third link. The second and the fourth through eight, displays correctly. What on earth is going on?

    IE7
    Here everything breaks apart!
    The navbar portion of the header is moved out of the div all together, and displayed horizontally next to it instead.
    IE is also the only browser that is incapable of positioning the dog portrait correctly in relation to the surrounding nav-images.
    Attached Images Attached Images
    S. Rosland

  7. #6
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    I'm using FF2 at 1024X768. I see about an extra 200px to scroll.
    You can put absolute divs anywhere you want inside a relative positioned div. It won't have anything to do with the content of that div.

  8. #7
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    So, what you want to do is position: relative the *parent*, not the children. Then you position: absolute the *children*, whose coordinates will now be relative to the parent. This is what I was trying to get at in my reply in your previous thread

    EDIT: Regarding the purple/underline issue, that's because the | is within your a tag and you haven't cleared the styling for [minicode]a:link[/minicode] or [minicode]a:visited[/minicode]. If you add a couple of rules:

    Code:
    #links a:visited, #links a:link
    {
        text-decoration: inherit;
        color: inherit;
    }
    That should take care of the problem.

  9. #8
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Quote Originally Posted by aeroweb99
    I'm using FF2 at 1024X768. I see about an extra 200px to scroll.
    Very strange!
    I'm looking at it at the same resolution, and I have no horizontal scroll (which I agree with you is an absolute disaster!)
    Quote Originally Posted by aeroweb99
    You can put absolute divs anywhere you want inside a relative positioned div. It won't have anything to do with the content of that div.
    Yes you can, I misread your post. In my mind, I thought you wanted me to use relative positioning within the main container. Relative positioning within any DIV, will relate to content not the DIV. (but like I said, I misread that part of your post).

    On the other hand, the main content container is not centered here, it's left justified. There are two main containers. One is for the banner, and the other for content.
    They are both absolutely positioned (which I guess can be altered), but everything inside them are positioned with regard to the parent container.

    Quote Originally Posted by Shadowfiend
    EDIT: Regarding the purple/underline issue, that's because the | is within your a tag and you haven't cleared the styling for [minicode]a:link[/minicode] or [minicode]a:visited[/minicode].
    I didn't know the "|" caused a problem, so I've altered that part (I have moved the "</a>" towards the link text, so that the "|" stays outside the "<a href>".
    Code:
    <div id="links">
    				<a href="http://nordiskhundemassasjeskole.no">Hjem</a>&nbsp;&nbsp;|&nbsp;&nbsp; 
    				<a href="/nettbutikk/index.php">Nettbutikk</a> &nbsp;&nbsp;|&nbsp;&nbsp; 
    				<a href="/kurs/kurs.htm">Kurs</a> &nbsp;&nbsp; |&nbsp;&nbsp;
    				<a href="/pamelding/pamelding.php">P&aring;melding</a>&nbsp;&nbsp;|&nbsp;&nbsp;   
    				<a href="/praktisk/praktisk.htm">Praktisk</a>  &nbsp;&nbsp;|&nbsp;&nbsp; 
    				<a href="/kontakt/kontakt.php">Kontakt</a>   &nbsp;&nbsp;|&nbsp;&nbsp;   
    				<a href="/galleri/galleri.php">Galleri</a> &nbsp;&nbsp;|&nbsp;&nbsp;   
    				<a href="/terapaut/terapaut.htm">Terapautens verden</a>
    			</div>
    That solved the problem of repeating purple links and underlining, but the first link "Hjem" still shows up purple with an underscore. (?)

    And I do have an a:link definition in "main.css"
    Code:
    #links{
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	color: white ;
    	border:0;
    	position:absolute;
    	top:142px;
    	left:35px;
    	z-index:3;
    }
    a:link {
      color: white ;
      text-decoration: none ;
    }
    So why does the first link now turn up purple with an underscore?

    #################

    To give you a brief summary of the page layout, here's what I've done:

    There are two main containers absolutely positioned:
    - The banner div
    - The content div

    My client insisted on having a drop shadow on the banner, which (from a previous answer from smoseley) is only achievable through a ".png" image.
    However the .png image is large (300+ KB). I therefore cut the image in two. One is a a profile cut of the PNG image (the one that contains the outer edge of the banner with the drop shadow and transparency, and the other the main portion of the banner that is now a JPEG. Combined they are now only 59KB. They are both nested in seperate DIV's, and are seamlessly integrated in all browserversions except IE!

    The main content container holds the right and left white shadows (imitating a piece of paper), and everything else is absolutely positioned in seperate DIV's within that container. The javascript rollovers works fine in any browser, but the dog portrait fails miserably in IE for some reason.
    It does not move down like it is supposed to:
    Code:
    margin-top:85px;
    Also the drop shadow part of the banner, works perfectly in all browsers I've tried, except IE.
    In IE, the drop shadow image refuses to rest on top of the main banner image, but insists on displaying it horizontaly next to the banner image, which gives a horrible result.
    Code:
    #bannerShadow {
    	border:0;
    	position:absolute;
    	top:0;
    	z-index:2;
    }
    How on earth can I fix this?
    S. Rosland

  10. #9
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    The :visited pseudoclass is what triggers the purple color and underline. By the way, I'd avoid the &nbsp;s and use margins judiciously instead.

    As for the IE display problems, I don't have some solid access to IE right now, otherwise I'd look into it in detail. Sorry :-/

  11. #10
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Quote Originally Posted by Shadowfiend
    The :visited pseudoclass is what triggers the purple color and underline. By the way, I'd avoid the &nbsp;s and use margins judiciously instead.
    Shadow to the rescue!

    That fixed the purple link problem!

    I also made a fix to the dog-portrait issue. I erased the "margin-top" piece with "padding" instead, and now it works in all browsers at my disposal.

    However, the part where IE moves the transparent shadow portion of the banner out of its container, still lingers.

    That is the most catastrophic part of the design as of now.

    Any idea why this is happening?

    EDIT:
    Quote Originally Posted by Shadowfiend
    I'd avoid the &nbsp;s and use margins judiciously instead
    I'm not sure how you practically incorporate this, could you examplify please?

    BlaBla | BlaBla | BlaBla
    is what I want.

    How can I avoid;
    BlaBla|BlaBla||BlaBla
    without using &nbsp; ?
    S. Rosland


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:31 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com