Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: text layer/box position different in firefox/explorer

  1. #1
    Join Date
    Nov 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow text layer/box position different in firefox/explorer

    Hello,
    I've got a problem with text layers in Firefox. The layers are in different position in Mozilla Firefox compared with Internet Explorer.
    Could someone please help me to make the two layers to be in same position in Firefox as Explorer?

    Link: http://four.fsphost.com/firefoxtrouble/

    CODE:

    <body>



    <body bgcolor="#FFFFFF" ondragstart="return false" onselectstart="return false">

    <div align="left">

    <div style="position: absolute; width: 132px; height: 267px; z-index: 1; left: 274px; top: 218px; bottom:0; right:0" id="lager1" align="right">
    <p align="right"><b><font color="#FFFFFF">Name:</font></b></p>
    <p align="right"><b><font color="#FFFFFF">Birth:</font></b></p>
    <p align="right"><b><font color="#FFFFFF">Bakgrund:</font></b></p>
    <p align="right">&nbsp;</p>
    <p align="right">&nbsp;</p>
    <p align="right">&nbsp;</p>
    <p align="right"><b><font color="#FFFFFF">Kontakt:</font></b></div>

    <div style="position: absolute; width: 239px; height: 267px; z-index: 1; left: 417px; top: 218px; bottom:0; right:0" id="lager2">
    <font color="#FFFFFF">Magnus</font><p><font color="#FFFFFF">1985</font></p>
    <p><font color="#FFFFFF">NA <br>
    </font><font color="#C0C0C0">Gripenskolan, Nkpng<br>
    <i>A - provet 2004</i></font><font color="#FFFFFF"><br>
    Programmet <br>
    </font><font color="#C0C0C0">KTH</font></p>
    <p>&nbsp;</p>
    <p><font color="#FFFFFF">e-mail here<br>
    0702-</font></div>


    <table border="0" cellpadding="0" cellspacing="0" width="900" height="595" bgcolor="#333333" bordercolor="#FFFFFF">
    <!-- MSTableType="layout" -->
    <tr>
    <td height="537" valign="top">&nbsp;<p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    </td>

    </table>
    </div>
    </body>
    </html>


    Thanks!
    Magnus

  2. #2
    Join Date
    Nov 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I changed the <p align="right">&nbsp;</p> to <br> and now the boxes are on the same height position. But they are still 10px lower in Firefox compared with Explorer, why is that..?

  3. #3
    Join Date
    Nov 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    dump!

  4. #4
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    First, stop trying to absolutely-position everything. The content should be arranged logically so that the label is paired with the content. That is, other labels shouldn't appear before the relevant content.

    Below is one way to mark-up the content. It's rather messy as there's no appropriate semantic elements: using div and span elements this often is usually something to avoid. Note that only the labels have been absolutely-positioned so that they appear to the left.

    The class names used represent what I think you're trying to present. The two meaningless name - foo and bar - occur because I'm not sure, though I could guess. Feel free to replace them with something better.

    Code:
    .container {
        background: #333333;
        color: #ffffff;
        padding: 1em;
        width: 20em;
    }
    .personal, .background, .contact {
        margin: 0.5em auto 0;
        position: relative;
        padding-left: 5em;
        width: 8em;
    }
    .personal {
        margin-top: 0;
    }
    .institution, .bar {
        background: transparent;
        color: #c0c0c0;
    }
    .label {
        position: absolute;
        left: 0;
    }
    HTML Code:
    <div class="container">
        <div class="personal">
            <div class="name">
                <span class="label">Name:</span>
                Magnus
            </div>
            <div class="birth">
                <span class="label">Birth:</span>
                1985
            </div>
        </div>
        <div class="background">
            <span class="label">Bakgrund:</span>
            <div class="foo">
                NA
                <div class="institution">Gripenskolan, Nkpng</div>
                <div class="bar">A - provet 2004</div>
            </div>
            <div class="foo">
                Programmet
                <div class="institution">KTH</div>
            </div>
        </div>
        <div class="contact">
            <span class="label">Kontakt:</span>
            <div class="e-mail">e-mail here</div>
            <div class="telephone">0702-</div>
        </div>
    </div>
    Hope that helps,
    Mike

  5. #5
    Join Date
    Nov 2006
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Divs as main layout?

    HEy mwinter,

    The code you gave is great looks so easy but still very effective. I had to redesign my complete page yesterday because I realized that things moved because of auto margins left and right for the main container of the page. Now everything is fix even if I resize the browser window or the resolution (except for IE7 I just realized this morning).
    Could you please have a quick look to see wether I did it completely wrong? It would be nice. I used divs with auto margins on the left and paddings for firefox and no paddings for IE6.
    Site: http://www.christopheolinger.com
    CSS: http://www.christopheolinger.com/mainstyle.css
    CSS for IE6 http://www.christopheolinger.com/mainstyleIE6.css
    Last edited by belsidaam; 11-29-2006 at 12:27 PM.

  6. #6
    Join Date
    Nov 2006
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sorry I just realize that the mainstyleIE6 is not accessible. I do not know why. I'll check when I come home tonight and post the code.
    Sorry (OOps or maybe this is why the IE7 now looks shifted? He does not find the specific css file. I suppose any adjustments made for IE6 should work for IE7 after all)
    Last edited by belsidaam; 11-29-2006 at 02:07 PM. Reason: Eureka

  7. #7
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by belsidaam View Post
    I had to redesign my complete page yesterday because I realized that things moved because of auto margins left and right for the main container of the page. Now everything is fix even if I resize the browser window or the resolution (except for IE7 I just realized this morning).
    "Fix" as in static? Unmoving? That's not necessarily a good thing. I personally prefer documents that are fluid and will reflow sensibly to fit the viewport.

    Could you please have a quick look to see wether I did it completely wrong? ...

    http://www.christopheolinger.com
    Well, first impressions aren't that good. It looks nice, sure, but it's far too wide and causes a horizontal scrollbar, here. It's also too tall, causing two vertical scrollbars: one for the document itself, and another for the content. The latter is annoying because I can't see it without scrolling to the right. Even if I had a larger monitor, or changed my graphics card settings, it would still be too large: I wouldn't use a maximised window, then.

    This is why I prefer fluid designs. I could be looking at the site on a display set to 640x480 and it would still be readable and presentable.

    Viewing without images also highlights problems: your layout breaks down and some of the text is unreadable.

    Mike

  8. #8
    Join Date
    Nov 2006
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the comments. Thats the kind of critics I wanted. Constructive.
    I tried to make it a bit fluid with the auto margins on the edges but obviously it is not enough. So I have to make the fix parts (like the menuimage on the left) less wide. But than I have a problem:
    Let's say I want to have the left menuimage a fix width and the top menuimage with the text also. Could I use a percentage or em value for the width of an image inbetween to make it adjust with the screen size? Like this I would try to find a good layout for a 640x480 and have a fluid design for higher resolutions. This would avoid the horizontal bar. For the vertical I could do a similar thing:Let the footer drop with page content with an image that gets higher. Only thing is, I would get pixels at the place were the fix and resizable images meet. I could use simple divs. But then I have no gradient.

    Probably in the end it is the question of the target group and also: With fluidity you might sacrifice a bit in the design.

    The without images problem I had not thought of. Sorry. I have put invisible text in the links of the buttons to have it show in a text browser like lynx as a list, but for images disabled I will have to do it differently. Would you put a visible text link behind the image?

    Again thanks for the comments. I'm probably doing all the beginners mistakes but I am a fast learner.

    Christophe

  9. #9
    Join Date
    Nov 2006
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb Resizable images

    Ok I'll know what to do.
    I'll make an image that is only a few pixels wide and set the size to a relative value. The parts that I cannot stretch around like the logo will stay. Everything inbetween will be replaced. This will also make the image sizes smaller, another concern I had. The same thing I can do for the left menu just a slice of the blue theme that will be stretched to fill the fix images.
    check out http://www.fedoraforum.org. They did this.

  10. #10
    Join Date
    Nov 2006
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Resizing horizontally

    It doesn't work as expected. A little bit of help please?
    Three images: left and right are fix. The middle should resize. At 1280x1024 they look good but when resizing they jump.

    The url: http://www.christopheolinger.com/index2.php
    Code:
    The main page:
    <!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<link rel="SHORTCUT ICON" href="pics/favicon.ico" />
    	<title>Homepage of Christophe Olinger</title>
    	<meta name="verify-v1" content="ZDxsRRP8AO3aE74o0vtQk529/UQRXYhQ4/6eV3+06DE=" /> 
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    	<link rel="stylesheet" type="text/css" href="mainstyle2.css" />
    	<!--[if gte IE 5]>
    		<link rel="stylesheet" type="text/css" href="mainstyleIE62.css" />
    			<![endif]-->
    		</head>
    
    
    <body>
    
    <!--Load HEADER-->
    <div id=headerdiv>
    	<div id="left"><img id="headerleft" src="/pics/headerleft.png" alt="www.christopheolinger.com" /></div>
    	<div id="middle"><img id="headerleft" src="/pics/headerlinker.png" /></div>
    	<div id="right"><img id="headerright" src="/pics/headerright.png" alt="" /></div>
    		</div>
    <!--End of HEADER-->
    
    
    		</body>
    		</html>
    The css:
    Code:
    #headerdiv {height:150px; border:solid; width:100%}
    #left {float:left;background-image:url(pics/headerleft.png);}
    #middle {float:left; background-image:url(pics/headerlinker.png); height:118px;background-repeat: repeat-x; width:32%}
    #right {float:left;background-image:url(pics/headerright.png);}

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
  •