text layer/box position different in firefox/explorer

**mustaschen** · 11-16-2006, 02:10 PM

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">
Name:
Birth:
Bakgrund:
 
 
 
Kontakt:</div>

<div style="position: absolute; width: 239px; height: 267px; z-index: 1; left: 417px; top: 218px; bottom:0; right:0" id="lager2">
Magnus1985
NA 
Gripenskolan, Nkpng 
A - provet 2004 
Programmet 
KTH
 
e-mail here 
0702-</div>

<table border="0" cellpadding="0" cellspacing="0" width="900" height="595" bgcolor="#333333" bordercolor="#FFFFFF">

<tr>
<td height="537" valign="top">  
 
</td>

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

Thanks!
Magnus

**mustaschen** · 11-16-2006, 06:26 PM

I changed the   to and now the boxes are on the same height position. But they are still 10px lower in Firefox compared with Explorer, why is that..?

**mustaschen** · 11-27-2006, 05:29 PM

dump!

**mwinter** · 11-28-2006, 12:58 AM

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

**belsidaam** · 11-29-2006, 10:43 AM

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

**belsidaam** · 11-29-2006, 10:54 AM

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)

**mwinter** · 11-30-2006, 03:10 PM

Originally Posted by belsidaam

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

**belsidaam** · 12-01-2006, 09:37 AM

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

**belsidaam** · 12-01-2006, 09:57 AM

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.

**belsidaam** · 12-01-2006, 07:21 PM

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);}

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

Thread Tools

Search Thread

text layer/box position different in firefox/explorer

Divs as main layout?

Resizable images

Resizing horizontally

Bookmarks

Bookmarks

Posting Permissions