No replies
tmeuz
Offline
newbie
Last seen: 18 years 7 weeks ago
Joined: 2004-08-16
Posts: 1
Points: 0

Am a new convert to CSS. After years of working on a 3-column (plus nav header) e-commerce site that's a kluge of nested tables, I'm taking the leap and switching. I'm impressed with how much cleaner my code is and with the fact that my initial simple attempt seems to display well in the browsers that people are using, most of which thankfully now support CSS2 (I still can't get around using a table to organize the elements in my top page nav header, so I may not be using "pure CSS").

I'm playing around with my site in various monitor resolutions, and am also experimenting with different browser zoom/text size levels. I'm using relative font sizes (percentages). The browsers I'm using are IE Win 6, Mozilla Win 1.7 and Opera Win 7.53. Will add the IE5 box-model work-around later, since they still have 7% market share. I'm ignoring NN4 and below.

I'm running into 3 problems, and would appreciate wisdom on how to fix, if possible:

1. My left and right columns are fixed with (CSS given at end of post). When I zoom/increase text-size to the largest setting (at 1024x768 resolution), I notice 3 different behaviors. IE keeps the columns at fixed width, and wraps the text within the column boundaries- this is what I prefer. Opera expands the columns arbitrarily, and collapses my center column. Mozilla overwrites text past the boundaries of the columns. Are there ways to fix the latter two behaviors?

2. I notice that during a zoom, Opera also magnifies the image elements in my header, whereas IE and Mozilla keep the images at their pixel size. I prefer the latter. Any way to fix Opera?

3. I have a form element (input box for searches) in my navigation header. When I zoom in Mozilla, it also zooms the size of my input box, which then displaces other elements in my nav header. I tried decreasing the size of the input box with a "text-size: 75%" declaration, which works, but Mozilla still acts as though the element is normal size, and my nav header elements remain displaced. Is there a way to fix this?

Any input is appreciated.

Here is a simplified version of my code- I'm keeping the CSS within the <HEAD></HEAD> section of my HTML for the moment:

<html>

<head>
<style type="text/css">
<!--

body {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
}

#topheader {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
margin: 0px;
padding: 0px;
border: 0px;
background: #ffffff;
height: 130px;
}

#mainbox {
margin: 140px 190px 0px 190px;
padding: 0px;
border: 0px;
}

#leftbox {
position: absolute;
top: 140px;
left: 10px;
margin: 0px;
padding: 0px;
background: #ffffff;
border: 2px solid #003399;
width: 150px;
}

#rightbox {
position: absolute;
top: 140px;
right: 10px;
margin: 0px;
padding: 0px;
background: #ffffff;
border: 2px solid #003399;
width: 150px;
}

P {font-family: Arial; font-size: 85%; margin-left: 5px; margin-right: 5px;}

p.columnheader {font-family: Arial; font-size: 75%; background-color: #ffcc66; color: #003399; padding: 5px; font-weight: bold; margin: 0px;}

form {
margin: 0px;
padding: 0px;
border: 0px;
}

-->
</style>
</head>

<body>

<div id="leftbox">
<p class="columnheader">Left column header 1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="columnheader">Left column header 2</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

<div id="rightbox">
<p class="columnheader">Right column header 1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="columnheader">Right column header 2</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

<div id="mainbox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="topheader">
<center>
<form>
<table cellpadding="0" border="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#003399" align="right" height="82" width="735"><img src="images/nav_top_left.jpg" width="610" height="82" alt=""></td>
<td bgcolor="#003399" align="left" height="82"><img src="images/nav_top_right.jpg" width="145" height="82" alt=""></td>
</tr>
<tr>
<td bgcolor="#6699cc" align="right" height="23" width="735"><img src="images/nav_middle_left.jpg" width="610" height="23" alt=""></td>
<td bgcolor="#ffcc66" align="left" height="23"><script src="javascript/writedate.js"></script></td>
</tr>
<tr>
<td bgcolor="#ffffff" align="right" height="25" width="735"><img src="images/nav_bottom_left.jpg" width="610" height="25" alt=""></td>
<td bgcolor="#ffcc66" height="25"><input type="text" size="10" name="sp-q">&nbsp;<img src="images/search.gif" width="38" height="16" border="0"></td>
</tr>
</table>
</form>
</center>
</div>

</body>
</html>