IE vs FoxFire and Positioning

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:  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>


<div>
<div id="logo"></div>
</div>
<div>
<div id="dock"></div>
</div>
<div>
<div id="ocsw">
Cold Storage and Warehouse LLP
</div>
</div>
<div>
<div id="hrtop"></div>
</div>
<div id="navigation">

<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">

</script>

</div>
<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>
<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>
</div>
</body>
</html>

Jan 21 '07 #1

Subscribe Post Reply

2156

drhowarddrfine

7,435

Expert 4TB

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

7,435

Expert 4TB

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

wreed

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

wreed

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

wreed

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

7,435

Expert 4TB

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

wreed

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

wreed

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

gyung

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

Similar topics

CSS Positioning and Browser Resizing

by: Bryan R. Meyer | last post by:

Hello Everyone, The problem of browser resizing has become an issue for me. While redesigning my webpage, I set the left and right margins to be auto so that my content would be centered. ...

HTML / CSS

Help with positioning - I'm too stupid

by: Jane Withnolastname | last post by:

I am trying to re-work an old site by replacing the html with css. On the main page, I have a logo image which I needed centred on the initial screen. I found the solution here:...

HTML / CSS

Absolute positioning--what am I missing

by: Harlan Messinger | last post by:

What am I not understanding about the definition of { position: absolute; }? "The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These...

HTML / CSS

Positioning context - does it work?

by: rajek | last post by:

I posted a similar question yesterday, but didn't get an answer that resolved the issue. (Thanks to those who tried though.) The background: I've read in books and online that if you have one...

HTML / CSS

CSS positioning question

by: NS | last post by:

I am relativly new to css positioning and have a question regarding the display of a DHTML pop-up Here is the basic HTML I am using: <html> <head> <script language="JavaScript"> <!--

HTML / CSS

css positioning

by: Charles Harrison Caudill | last post by:

with tables there is a clean and algorithmic way to organize things, but with css which is, once you get it working, much cleaner, I have to tweak and patch and hope and pray and curse before...

HTML / CSS

absolute, relative, not set, static positioning ??????

by: Rob R. Ainscough | last post by:

I'm slowly (very slowly) working my way thru the bizarre and sadistic world of control positioning in MultiViews (ASP 2.0). I came across this to help me explain (or attempt to anyway) why my web...

ASP.NET

Margin Collapse problem in Opera and perhaps Foxfire

by: boclair | last post by:

I have been approached over a page that has a horizontal menubar displaying over a banner. The problem advised that the menubar is not displayed and the banner moves up to the position the menubar...

HTML / CSS

absolute positioning

by: Mark | last post by:

hi, i'm trying to position something in the top right corner of a container, but i can't seem to figure out how to get it working. here's the html <div class='thumb'><a href='image.jpg'><img...

HTML / CSS

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++