By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,396 Members | 1,869 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,396 IT Pros & Developers. It's quick & easy.

IE vs FoxFire and Positioning

P: 7
I have several questions. I ran my html and css through a checker, and fixed all of the errors it found.

1) I was using IE for development, but have now switched to FF after reading other posts. Once my page is lined up for FF, how do I make it IE compatible? I found this code that tests for IE browser use: <!--[if IE]> <![endif]--> and I could redirect to an IE specific stylesheet.

2) I'm finding that I have to manually position most of my divs. Is that "normal"?

3) My page border does not move up to the bottom of my footer. I don't think I have any extraneous margins or padding.

4) How do you accommodate for text size changes especially in FF? I'm especially concerned about text spillover. FF lets you increase text size to the point of ridiculous!

I can't provide a link because my page is only on my desktop. My code is below. The button stuff is from a freebie program - not sure I'll keep it largely because of maintenance.

Thank you.


/*CSS for Xxxxx */
body {
top:0px;
border: 4px solid navy;
width: 915px;
color:white;
background: url("Images/bluepap.jpg");
}
#logo {
color:white;
background: url(Images/LogoTruck293x83.png);
height: 83px;
width: 293px;
position: relative;
left: 70px;
top: 25px;
}
#dock {
color:white;
background: url(Images/100_0145_441x144.png);
height: 144px;
width: 441px;
position: relative;
left: 459px;
top: -81px;
border: 1px solid
}
#ocsw {
font-family: Verdana, Helvetica, Arial, sans-serif;
background:url("Images/bluepap.jpg");
color: navy;
font-size: 20px;
font-weight: 900;
position: relative;
width: 430px;
left: 33px;
top: -110px;
}
#hrtop {
height: 10px;
color:#646464;
background: #646464;
position: relative;
top: -104px;
width:97.5%;
left:10px;
}
#navigation {
position: relative;
top:-104px;
left:10px;
}
h2 {
position:relative;
background:url("Images/bluepap.jpg");
top: 20px;
font-family: Verdana, Helvetica, Arial, sans-serif;
color: navy;
font-size: 24px;
font-weight: 900;
}
#bodytext {
font-family: Verdana, Helvetica, Arial, sans-serif;
position:relative;
background: url("Images/bluepap.jpg");
color: black;
top: 40px;
left: 200px;
margin: 0 auto;
width:675px;
padding-bottom: 250px;
}
#leftline {
font-family: Verdana, Helvetica, Arial, sans-serif;
background: url("Images/bluepap.jpg");
color: black;
font-size: 20px;
position:relative;
margin: 0 auto;
width:138px;
top: -130px;
left: -368px;
border-right: 4px navy solid;
padding: 0px 0px 0px 0px;
}
#building {
margin: 0 auto;
color:black;
background: url(Images/100_0142_780x108.png);
height: 108px;
width: 780px;
position: relative;
padding: 0px 0px 0px 0px;
clear:both;
left: -7px;
border-left: 56px solid #646464;
border-right: 56px solid #646464;
border-top: 1px solid;
}
#footer {
position:relative;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
font-size: X-small;
background: #C2C2C2;
color: black;
font-weight: 600;
text-align: center;
width: 892px;
left: -7px;
border-bottom: 10px solid #646464;
border-top: 1px solid;
}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Xxxxxx Cold Storage and Warehouse</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<link href="style1.css" rel="stylesheet" type="text/css" >
</head>

<body>
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -->

<div>
<div id="logo"></div>
</div><!-- logo outside -->
<div>
<div id="dock"></div>
</div><!-- doc outside -->
<div>
<div id="ocsw">
Cold Storage and Warehouse LLP
</div><!-- ocsw -->
</div><!-- ocsw outside -->
<div>
<div id="hrtop"></div>
</div><!-- hrtop outside -->
<div id="navigation">
<!-- Begin Free-Buttons.org -->
<table width=0 id="free-buttons.org:screxst0" cellpadding=0 cellspacing=0 border=0><tr>
<td title='Welcome to Xxxxxx Cold Storage'><a href="index.html" onmouseover='wbe("0o");' onmouseout='wbe("0n");' onmousedown='wbe("0c");'><img src="wbimg/imgn0.gif" name=btn0 width=70 height=18 alt='Welcome to Xxxxxx Cold Storage'></a></td>
<td title='Oneida Services'><a href="services.html" onmouseover='wbe("1o");' onmouseout='wbe("1n");' onmousedown='wbe("1c");'><img src="wbimg/imgn1.gif" name=btn1 width=70 height=18 alt='Xxxxxx Services'></a></td>
<td title='Welcome to Oneida Cold Storage'><a href="facility.html" onmouseover='wbe("2o");' onmouseout='wbe("2n");' onmousedown='wbe("2c");'><img src="wbimg/imgn2.gif" name=btn2 width=70 height=18 alt='Welcome to Xxxxxx Cold Storage'></a></td>
<td title='About Us'><a href="about.html" onmouseover='wbe("3o");' onmouseout='wbe("3n");' onmousedown='wbe("3c");'><img src="wbimg/imgn3.gif" name=btn3 width=70 height=18 alt='About Us'></a></td>
<td title='About Us'><a href="contact.html" onmouseover='wbe("4o");' onmouseout='wbe("4n");' onmousedown='wbe("4c");'><img src="wbimg/imgn4.gif" name=btn4 width=70 height=18 alt='About Us'></a></td>
</tr></table>
<script type="text/javascript">
<!--
function wbpr(im){var i=new Image();i.src='wbimg/img'+im;return i;}
function wbe(id){x=id.substring(0,id.length-1);document['btn'+x].src=eval('btn'+id+'.src');if(id.indexOf('e')!=-1)document['btn'+x+'e'].src=eval('btn'+id+'e.src');}
btn0n=wbpr('n0.gif');btn0o=wbpr('o0.gif');btn0c=wb pr('c0.gif')
btn1n=wbpr('n1.gif');btn1o=wbpr('o1.gif');btn1c=wb pr('c1.gif')
btn2n=wbpr('n2.gif');btn2o=wbpr('o2.gif');btn2c=wb pr('c2.gif')
btn3n=wbpr('n3.gif');btn3o=wbpr('o3.gif');btn3c=wb pr('c3.gif')
btn4n=wbpr('n4.gif');btn4o=wbpr('o4.gif');btn4c=wb pr('c4.gif')
//-->
</script>
<!-- End Free-Buttons.org -->
</div><!-- navigation -->
<div id="leftline">
<div id="bodytext">
<h2>Welcome to Xxxxxx Cold Storage and Warehouse</h2>
<br />
<br />
At Xxxxxx Cold Storage and Warehouse, our customers are our highest priority,
shown through extended hours, tailored reporting for your tracking needs, and
custom programs for your storage needs.
<br /><br />
Call us today and let us exceed your specific cold storage and warehousing expectations!
</div><!-- bodytext -->
<div id="building"></div>
<div id="footer">
Xxxxxx Cold Storage and Warehouse LLC | 9999 East 55th Avenue | Xxxxxxxxx, XX 99999
<br>
voice: 555.555.5555 | fax: 555.555.5555
<br>
Site design <a href="http://www.u2logic.com"> U2logic </a>. Site powered by <a href="http://www.u2logic.com"> U2Weblink&#8482 middleware </a>.
</div><!-- footer -->
</div><!-- leftline -->
</body>
</html>
Jan 21 '07 #1
Share this Question
Share on Google+
9 Replies


drhowarddrfine
Expert 5K+
P: 7,435
There is no IE vs Firefox; there is only what's wrong with IE.

The answers to 1 and 2 are 'it depends'. More in a moment.
3) When you use relative positioning, you have to remember that when you move the element, the 'hole' left behind is not filled and will remain open as if the original element is still occupied. In your #building div, you have top:-105px which is causing this.
4)This is one of the more difficult things to accomodate. The only way to do it is make your whole page fluid using ems and percentages.
Jan 21 '07 #2

drhowarddrfine
Expert 5K+
P: 7,435
1) Most of the time, the differences you will see in IE are bugs and quirks of that browser. Fortunately, most of those are well known and there are hacks to fix it. One of the best known sites for IEs problems is positioniseverything.net. Just keep in mind that, if there are differences between a browser and IE, you can almost always assume the problem is in IE and not the other browser.

2) In many cases, you can just leave positioning alone and let it flow normally. If you don't like where it lands then you need positioning. Obvious answer but it looks like you are using relative positioning because you feel you are supposed to and not that you need to.

It's Firefox not FoxFire.
Jan 21 '07 #3

P: 7
1) Most of the time, the differences you will see in IE are bugs and quirks of that browser. Fortunately, most of those are well known and there are hacks to fix it. One of the best known sites for IEs problems is positioniseverything.net. Just keep in mind that, if there are differences between a browser and IE, you can almost always assume the problem is in IE and not the other browser.

2) In many cases, you can just leave positioning alone and let it flow normally. If you don't like where it lands then you need positioning. Obvious answer but it looks like you are using relative positioning because you feel you are supposed to and not that you need to.

It's Firefox not FoxFire.
Thank you so much for your answers! Sorry for being dyslexic!

Yes, I was using relative, or SOME position, because I thought I was supposed to. Do I understand correctly that generally I don't need to use "position= "? That would sure be a lot easier!

I'll check out positioniseverything.net.

Thank you for your help! You guys are amazing!
Jan 21 '07 #4

P: 7
There is no IE vs Firefox; there is only what's wrong with IE.

The answers to 1 and 2 are 'it depends'. More in a moment.
3) When you use relative positioning, you have to remember that when you move the element, the 'hole' left behind is not filled and will remain open as if the original element is still occupied. In your #building div, you have top:-105px which is causing this.
4)This is one of the more difficult things to accomodate. The only way to do it is make your whole page fluid using ems and percentages.
Thanks. I had tried using ems and percentages, but was running into spillover with window or text resizing. That got me trying all kinds of other position= and directional measurment combinations. Relative with px seemed to give me the closest result to what I wanted.

I'm a little confused about "position=" and directional positions. I thought that to use a directional position (left=, top=, etc.), that I HAVE to have a "position=" something. Is this right?

Thanks again.
Jan 21 '07 #5

P: 7
I'm working through your answers. My focus is on the first two images: logo and dock. When I remove "position:relative;" and the top and left measurements, both images are flush left against the body border, the logo is flush top, and the dock image is directly under the logo. Instead, I want the two images across from each other at the top with some white space around each. The only way I can find to make it work is using relative and minus top and positive left measurements to position the dock image higher and across the logo image. Is there a better way?
Thank you.

body {
top:0px;
border: 4px solid navy;
width: 915px;
color:white;
background: url("Images/bluepap.jpg");
}
#logo {
position:relative; /* relative to body */
left:2em;
top:1.5em;
color:white;
background: url(Images/LogoTruck293x83.png);
height: 83px;
width: 293px;
border:1px black solid;
}
#dock {
position:relative; /* relative to logo */
left:25.5em;
top:-4.5em;
color:white;
background: url(Images/100_0145_441x144.png);
height: 144px;
width: 441px;
border: 1px solid black;
}
Jan 21 '07 #6

drhowarddrfine
Expert 5K+
P: 7,435
You are correct, positioning is not always needed and some pages don't use it at all. If you want one element to follow right behind another then you don't have to do anything special to it; just leave it alone. For example, two paragraphs one after the other. You don't need to add "position:relative" or anything else.

But, if you want something other than the normal flow, then "position:something" is what you want but you also need to know about floats. Floats will 'float' an element left or right but it removes the element from the normal flow. That removal is an important point. If you need more information about that, I've got links.

I'll get to your code later.
Jan 22 '07 #7

P: 7
You are correct, positioning is not always needed and some pages don't use it at all. If you want one element to follow right behind another then you don't have to do anything special to it; just leave it alone. For example, two paragraphs one after the other. You don't need to add "position:relative" or anything else.

But, if you want something other than the normal flow, then "position:something" is what you want but you also need to know about floats. Floats will 'float' an element left or right but it removes the element from the normal flow. That removal is an important point. If you need more information about that, I've got links.

I'll get to your code later.
Thanks, I'd appreciate the links. I understand about removing elements from the flow - absolute does that too.
Jan 22 '07 #8

P: 7
Just to let you know, I found some really good float information, and changed my page to be pretty liquid using mostly floats and a few relatives. I *think* I have a decent handle on what's going on as long as I keep it simple.

I really appreciate your help and quick responses! Thank you very much.
Jan 22 '07 #9

P: 21
Most sites I come across recommend programming in Firefox first, then writing extra stylesheets if really needed for MSIE. You'll only have to change whatever causes the bugs in IE, for the newer sheet will overwrite only those that have changes.
Jan 22 '07 #10

Post your reply

Sign in to post your reply or Sign up for a free account.