|
CSS - Layout Breaks With Browser Zoom
Hi all,
I'm brand new to this forum, with some intermediate CSS skills. I've trimmed down my website in order to solve a persistent issue plaguing my layout. This issue involves what happens when using browser zoom: columns widths are recalculated incorrectly, and the right background is marred with a vertical line. Additionally, the main nav buttons fluctuate in size too. Extra space is visible to the right of the nav bar. I'm assuming this is happening because I've used exact pixel dimensions. I'm willing to change that, as long as the basic appearance of the layout can be achieved some other way. My code is fairly long, and several key images are critical to layout. I think the best way to share this would be through a link...Any help is appreciated, and I'd be very grateful! Thanks in advance. EDIT: Thanks to E-Oreo for the link tip. stuartletizia.com SLASH skinned SLASH index.html EDIT: I'm working in 1680 x 1050 on Windows 7, testing with Firefox 6.0.2, Chrome 13.0.782.220, IE 8, and Safari 5.1. Similar TutorialsHi all, I'm fairly new to CSS and this is one of my first attempts at a somewhat complicated layout. The page looks OK in FF, IE 7, Safari, and Opera, but if I zoom in or out while in FF or IE, it breaks the layout by increasing the width between some of the cube divs. Is there any way to fix this? Link: http://universalcorner.com/testsite/ Stylesheet: Code:
body {
font-family: Arial, "MS Trebuchet", sans-serif;
}
#maincontainer {
width: 966px;
height: 748px;
border: 12px solid #000027;
margin: 0 auto;
padding: 0;
}
#header {
border-bottom: 12px solid #000027;
height: 140px;
z-index: 100;
}
#logo {
background: #fff;
width: 480px;
height: 100%;
border-right: 12px solid #000027;
display: inline;
float: left;
vertical-align: top;
}
#logo p { /* functions as image container */
position: relative;
top: 20px;
}
#slogan {
position: relative;
background: #78C0FF;
width: 292px;
height: 100%;
border-right: 12px solid #000027;
display: inline;
float: left;
vertical-align: top;
padding: 0 10px 10px 10px;
z-index: -100;
zoom: 1;
}
#consultants {
position: relative;
background: red;
left: 6px;
width: 150px;
/* width: 150px; */
height: 100%;
display: inline;
float: left;
text-align: center;
margin: 0;
padding: 0;
z-index: -100;
}
ul.nav { /* navigation bar */
position: relative;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
width: 126px;
height: 586px;
background: #4486C4;
padding: 0 10px 10px 20px;
margin: 0 0 10px 0;
border: solid #000027;
border-width: 0 12px 0 0;
list-style: none;
}
ul.nav a {
text-decoration:none;
color:#000;
}
ul.nav a:hover {
color:#fff;
}
ul.nav li { /* all list items */
padding: 16px 0 0 0;
list-style: none;
}
ul.squares {
list-style: none;
padding: 0;
margin: 0;
}
ul.squares li {
position: none;
background: #000;
width: 150px;
height:140px;
padding: 0;
margin: 0;
border: solid #000027;
border-width: 0 12px 12px 0;
display: inline;
float: left;
}
ul.squares li.end {
border-right-width: 0;
}
ul.squares li.bottom {
border-bottom-width: 0;
}
#textbox {
width: 636px;
height: 292px;
float: left;
display: block;
border: solid #000027;
border-width: 0 12px 12px 0;
background: #C1BDFF;
margin: 0;
padding: 0;
}
#textbox p {
margin: 10px;
}
div.cube {
width: 150px;
height: 140px;
border: solid #000027;
margin: 0;
padding: 0;
}
#consultation {
color: #fff;
font-size: 1em;
font-weight: bold;
position: relative;
display: inline;
float: left;
width: 302px;
height: 130px;
border: solid #000027;
border-width: 0 12px 0 0;
background: #001E8A;
padding: 10px 0 0 10px;
margin: 0;
}
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Company Name, Inc.</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="maincontainer"> <div id="header"> <div id="logo"> <p align="center"><img src="images/logo.gif" alt="Company Name, Inc."></p> </div> <div id="slogan"> <p><span style="font-size:.85em">Company Name, Inc.<br> Anytown, US<br> <a href="mailto:info@companyname.com">info@companyname.com</a><br> 555-555-5555</span><br> <span style="font-size: 1.1em; font-weight:bold">Tagline Goes Here</span></p> </div> <div class="cube" style="float: left; border-width: 0 0 0 0"> <p align="center"><img src="images/image.gif" alt="Placeholder Image"></p> </div> </div> <ul class="nav"> <li><a href="index.php">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Plans & Pricing</a></li> <li><a href="#">Our Clients</a></li> <li><a href="#">Press Room</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Us</a></li> </ul> <div style="background: #001E8A; display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div> <div style="display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div> <div style="background: #002455; display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div> <div style="display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div> <div style="background: #4486C4; display:inline; float: left; border-width: 0 0 12px 0" class="cube"></div> <div id="textbox"> <div style="background: #002455; position: relative; float: right; top: 130px; border-width: 12px 0 0 12px; margin-top: 10px; margin-left: 10px" class="cube"></div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p></div> <div style="background: #002455; position: relative; top: 0; left: 0; display: inline; float: right; border-width: 0 0 12px 0" class="cube"></div> <div style="position: relative; top: 0; left: 0; display: block; float: right; border-width: 0 0 12px 0" class="cube"></div> <div style="position: relative; top: 0; left: 0; display: inline; float: left; border-width: 0 12px 0 0" class="cube"></div> <div style="background: #002455; position: relative; top: 0; left: 0; display: inline; float: left; border-width: 0 12px 0 0" class="cube"></div> <div id="consultation">Click here to get your FREE ONSITE CONSULTATION from Company Name</div> <div style="background: #78C0FF; position: relative; top: 0; left: 0; display: inline; float: left; border-width: 0 0 0 0" class="cube"></div> </div> </body> </html> Any suggestions would be much appreciated. The following is how I have always done my navigation. But in IE7 when I zoom above 100% the links seem to squash up and the hit area move away from the link! You can see this at www.stephaniedubois.co.uk What can I do to stop this? Thanks div id="topnavbar" class="navTextTop"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="gallery.html">GALLERIES</a></li> <li><a href="exhibit.html">EXHIBIT</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </div> CSS #topnavbar { text-align: center; position: relative; top: -25px; margin: 0px; padding: 0px; } #topnavbar li { display: inline; } #topnavbar ul { list-style:none; } .navTextTop a:link, .navTextTop a:visited { font:11px/20px Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none; letter-spacing: 0.13em; padding-left: 10px; padding-right: 10px; } .navTextTop a:hover { color: #000000; text-decoration:underline; } I have been pulling my hair out on this one because for the life of me I cannot make it work. Here is my page: www.nova-dataonline.com Notice that in IE, the "Featured Products" section displays nicely and when you mouseover "Cisco Systems" the filler text displays well within the grey box. The entire "Featured Products" section apart from the manufacturer logos, is one image and the mouseover text is padded to appear correctly within the grey box which is part of the image. Now notice in firefox that the entire layout breaks. The div displays much larger than I intended and the padded text does not display correctly. I have found that if I remove the padding from the div containing the background image, the div displays fine, but this leaves me without a way to style the content of the div in the correct place. So it appears that firefox is expanding the div based on the padding here is the relevant markup: PHP Code: <div class="featured" id="feat_1" onmouseover="toggleDiv('feat_1',1)" onmouseout="toggleDiv('feat_1',0)"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc. </div> and css: Code:
.featured{
visibility:visible;
width:410px;
height:350px;
position:absolute;
top:250px;
left:340px;
border:1px solid #999999;
border-left:none;
background-repeat:no-repeat;
background-position:center;
background-image:url(images/message/feat.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-style:normal;
padding:102px 27px 29px 29px;
}
#feat_1{visibility:hidden;}
and javascript (if it is even relevant to the problem): PHP Code: <script language="javascript" type="text/javascript"> <!-- function toggleDiv(id,flag) { if (flag == "1") { if (document.layers) document.layers[''+id+''].visibility = "show" else if (document.all) document.all[''+id+''].style.visibility = "visible" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" } if (flag == "0") { if (document.layers) document.layers[''+id+''].visibility = "hide" else if (document.all) document.all[''+id+''].style.visibility = "hidden" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden" } } --> </script> any idea? I have a 2 column layout using a left float which breaks in IE, sending the right column way down the page. It works perfectly in Firefox. I've been staring at it for days, and can't grok what I'm doing wrong. Please help! Code: body {
background-color: #ffffff;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
#container {
background-image: url(images/background.gif);
background-repeat: repeat-y;
width:700px;
margin: 0 auto;
margin-top: 10px;
}
#header {
background-color:#FCF6EA;
}
#content {
background-color: #FCF6EA;
width:497px;
float: left;
padding-left: 0px;
border-style: solid;
border-color: #F8CA52;
border-left-width: 1px;
border-right-width: 0px;
border-bottom-width: 0px;
border-top-width: 0px;
padding-top: 5px;
}
#sidenav {
background-image: url(images/navback.gif);
margin-left: 500px;
width: 200px;
}
#container > #sidenav {
width:203px;
}
#footer {
background-color: #ffffff;
background-image: url(images/footer.gif);
clear: both;
}
h1 {font-size: small;
margin-top: 0px;
margin-bottom: 0px;
font-family: Arial, Helvetica, sans-serif;
}
a:link {
color: #663333;
}
a:visited {
color: #000000;
}
B. http://64.232.240.200/new.html This site works well in Mozilla. There are spacing discrepancies between loads with Mozilla and latest Internet Explorer. The space under headings in the Main section differs between them, and there are gaps in the newsboxes where the background image runs uninterrupted on Mozilla. Internet Explorer Mac v5 does horrible things as can be seen in <a href="http://64.232.240.200/mac_ie5_screen.jpg">this screenshot</a>. (Colors have been changed slightly since this screenshot was taken, but you get the idea.) Any help is appreciated. Hope I'm posting this in the right place - was contemplating the HTML forum for a while but thought this would be the right place to post in. I'm trying to implement microdata into a site I'm developing to get Google's Rich Snippets search results. http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=176035 At the moment, implementing microdata seems to break my layout. For instance, wrapping prices on my site with Code: <span itemprop="price">119.99</span> seems to change the font size and other properties of the price's font style. The same thing happens when I wrap Code: <div itemscope itemtype="http://data-vocabulary.org/Product">...</div> around my template. Any idea why this is happening? I don't think there are any CSS styles in my site that are referencing to the microdata at all. I'm creating a new website, but it's not my field of expertise so i really need some help with CSS menus. I've integrated a drop down menu into the front page and the gallery menu into gallery page Gallery seems to be working fine in firefox 3, but in IE6 it's a bit messed up. With front page i dont have any more patience to work on it. Please help!, I can offer a compensation for that. Hey Peeps, A lowly whitebelt needs help. I'm working with a layout and I just can't seem to get one last part to display correctly: the footer. I've been racking my brain over it. Just can't get 'er done. Need some help from you seasoned pros, if you're willing to help out a neophyte. The layout displays great, just as I want it, in FF, Mozilla, Netscape, and Opera (essentially all mozilla browsers). There's extra space when using Maxthon or Avant, and, OF COURSE, it's totally jacked in IE. (Have been able to test on a Mac yet - but I'm sure safari will be another issue all together). Please Help!! The layout itself is visible at http://www.indecles.com/development/test2/ The style sheet is available at http://www.indecles.com/development/test2/indecles.css NOTE: a footer is obvious, but just in case, I've change the background color of the div in question to fire engine red, so there is no confusion. There is also a little Javascript thing going on in the index page, so try to take a look at that too. Thanks a ton in advance to anyone willing to try and help out. I've got the layout I want working in IE. I'd like to know how to make it work in all browsers. Mozilla seems to ignore the overflow setting for the docBody class. I'll happily ditch the table if someone can tell me a better way to achieve the result I want. Here's the code Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
body
{
margin: 0;
padding: 0;
background: yellow;
overflow: hidden;
}
div
{
margin: 0;
padding: 0;
}
.pageContainer
{
width: 100%;
height: 100%;
border-collapse: collapse;
margin: 0;
padding: 0;
}
.header
{
height: 100px;
background: orange;
}
.docBody
{
height: 100%;
width: 100%;
overflow: auto;
background: black;
}
.docBodyColumns
{
margin: 0;
padding: 0;
width: 100%;
border-collapse: collapse;
}
.col1
{
width: 33%;
background: green;
padding: 10px;
}
.col2
{
width: 34%;
background: red;
padding: 10px;
}
.col3
{
width: 33%;
background: blue;
padding: 10px;
}
.footer
{
height: 60px;
background: aqua;
}
</style>
</HEAD>
<BODY>
<table class='pageContainer'>
<tr>
<td class='header' valign='top'>Header</td>
</tr>
<tr>
<td>
<div class='docBody'>
<table class='docBodyColumns'>
<tr>
<td class='col1' valign='top'>
Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1
</td>
<td class='col2' valign='top'>
Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2
</td>
<td class='col3' valign='top'>
Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class='footer' valign='top'>Footer</td>
</tr>
</table>
</BODY>
</HTML>
I deleted the other posting as it take too long to work on it and it doesn't work. So, I got the other code from google search and decided to use it. There, I rearrange, redo, customzie the scripts to make it work better. Now I have one problem. See the class "wrapper" that make use of the height. I when I have it set at 100%, the footer extend too far down and the vertical scroll bar appear at the right. This is not what I want. I figure maybe it's because of the float that the browser doesn't know the real height of the header and footer. Can anyone help? I would really apppreciated it. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: #FFFF00;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
}
html {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
width: 100%;
}
table {
border: 0px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
#columnleft {
margin: 0px;
padding: 0px;
width: 10%;
height: 100%; /* Required by IE to inherit from wrapper (IE Hack) above */
background-color: #0000FF;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: absolute; */
float: left;
}
#columnright {
margin: 0px;
padding: 0px;
width: 10%;
height: 100%; /* Required by IE to inherit from wrapper (IE Hack) above */
background-color: #0000FF;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: absolute; */
float: right;
}
#footer {
margin: 0px;
padding: 0px;
width: 100%;
height: 65px;
background-color: #FFCC00;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: relative; */
}
#clearfooter {
clear: both;
}
#header {
margin: 0px;
padding: 0px;
width: 100%;
height: 65px;
background-color: #FFCC00;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position:relative; */
}
#main {
margin: 0px;
padding: 0px;
width: 79.8%; /* #columnleft + #main + #columnright = 100% width, but take away 0.02% for the #main due to for some browser's inaccurate mathetical rendering, such as 100.1% or 100.2% which cause the Right Column to jump to the bottom, so 99.8 % total width is better as it make the browser's glitch not be that noticeable. Just add some background color to the #wrapper so that the color can match either the #main or #columnright */
height: 100%; /* Required by IE to inherit from wrapper (IE Hack) above */
background-color: #FFFFFF;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: relative; */
float: left;
}
#wrapper {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
/* min-height: 80%; */ /* Might not be needed, it's an IE Hack... */
background-color: #FF0000;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: relative; */
}
/* IE Hack - Layout REQUIRES a height here to work */
/*
* html #wrapper {height: 100%;}
*/
</style>
</head>
<body>
<div id="header">Header Text</div>
<div id="wrapper">
<div id="columnleft">Left Text</div>
<div id="main">Center Content</div>
<div id="columnright">Right Text</div>
</div>
<div id="clearfooter"></div>
<div id="footer">Footer Text</div>
</body>
</html>
Thanks, FletchSOD With my limited knowledge of css, html, etc. I can mold my page to look just the way I desire on my given screen size (1280x1024) and browser (mozilla) but can not seem to get a fix for all variables (1024x768, etc.). I've tried containing divs & percents and a few other solutions to no avail. Just want to know if you guys know any quickfix or a recommended strategy in tackling this issue going further. id post code here, but the site wont allow it due to external links. so please check it out here and let me know http://needaputer.com css is at same url just located at .com /css/styles.css my goal: -- auto center content on page horizontally - (based on screen size - cross browser compatible) -- make sure header and footers are absolute top and bottom of page always (based on page size and cross-browser compatible) -- toggle "page zoom" for entire page via buttons (if needed and possible to adjust content for each screen size) ok in my site I have set the header and the menu as absolute because I want the header to go over the container and the menu to go over the header but my problem is that when I zoom in or out my header and menu move position to the left is there a way to make them not move their position but still have them one on top of the other this is my site for now (it's my course at uni and I have to include all those pages in it) http://padrewa.comeze.com this is my css code for: Code: body {
background-color: #FFF;
}
#wrapper {
background-color: #FFF;
}
#header {
* border:#999 0px solid;
position: absolute;
opacity: 0.50; filter:alpha(opacity=50);
}
#menu {
* border:#999 0px solid;
position:absolute;
padding-top:80px;
padding-left:180px;
}
#content {
border:#999 0px solid;
background-color:#FFFF99;
width:1050px;
padding-top:110px;
padding-bottom:70px;
margin-left: auto;
margin-right: auto;
}
#footer {
border:#999 0px solid;
background-color:#FFFF99;
width:1050px;
margin-left: auto;
margin-right: auto;
}
and this is my header template I included it in my page using php: Code: <div id="header"><table> <tr> <td><a href="index.php"><img src="style/logo.jpg" alt="Logo" height="100" /></a></td> </tr> </table> </div> <link rel="stylesheet" href="style/style.css" type="text/css" media="screen" /> <div id="menu" > <a href="index.php"><b>Home Page</b></a> <a href="gallery.php"><b>Gallery</b></a> <a href="biography.php"><b>Biography</b></a> <a href="draw.php"><b>Draw</b></a> <a href="write.php"><b>Write</b></a> <a href="contact.php"><b>Contact Me</b></a> </div> I've got a real head-scratcher that I cannot find a solution for. The webpage I am talking about is he http://test.ecofreshusa.com/Company.aspx If you see the "breadcrumb-like" submenu (the grey one) in IE, zooming at 100% looks fine, but when you hit Ctrl+ or Ctrl- to text zoom, the margins between every line item (its made using an unordered list).. fall out and the text loses all spacing. Does anyone know where I went wrong? Any help would be much appreciated.. Oh and heres the CSS im using to work with this menu. Code: <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#breadcrumb {
position: relative;
left:0px;
top:0px;
width:860px;
vertical-align: middle;
height: auto !important;
background: #F0f0f0;
margin-top: 0px;
display: inline;
}
#breadcrumb_left {
position:absolute;
left:0px;
top:0px;
width:660px;
height:20px;
background-color: #f0f0f0;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #f0f0f0;
z-index: 10;
}
#breadcrumb_right {
position:absolute;
float: right;
left:660px;
top:0px;
width:200px;
height:20px;
background-color: #F0F0F0;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #f0f0f0;
z-index: 10;
}
div.crumbs { margin: 0px 0px 0px 20px; float: left; font-family: Helvetica, Arial, San-serif; font-size: 10px; color: #999999;
}
b.crumb_title { font-family: Helvetica, Arial, San-serif; font-size: 10px; color: #999999;}
.crumbs span {
display: block;
}
.crumbs ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.crumbs ul li {
background: none;
display: inline !important;
margin: 0;
margin-left: 20px;
font-family: Helvetica, Arial, San-serif; font-size: 10px; color: #999999;
line-height: 20px;
}
.crumbs a:link { color: #0078C2; text-decoration: none; }
.crumbs a:visited { color: #0078C2; text-decoration: none; }
.crumbs a:hover { color: #629D34; text-decoration:underline; }
.crumbs a:active { color: #629D34; text-decoration:underline; }
.crumbs img {
float: none;
width: 8px;
height: 5px;
border: 0;
margin: 7px 0px 0px 20px;
padding: 0;
}
-->
</style>
Even when I zoom out to the least point, I want my background image in my webpage to stay normal size. How do I do this? Hello. I am building a site (perelachaisecemetery dot com)for a friend of my bosses. And I'm having problems with Safari on Mac Zoom Feature. When I zoom out my Nav Menu at the top (as well as my copyright at the bottom) get broken up into two lines. A windows safari user said this is not happening in his browser. It does not happen in Firefox. But it is happening in Chrome. Can anyone recommend anything? Is it something I can code not to happen or is it a individual browser preference thing. Please help. Thanks, Colin Hi, i have a styling problem. The page looks well in normal view in IE and firefox but when you zoom in the page (Ctrl++) the menu bar part of the page gets displaced from its position (right and left corner). your help and guidance wil be much appreciated. The page is at dev.cddimensions. com . Plz try to zoom in and notice the menu bar. My first post.... ok... First I would like to say THANK YOU to anyone who has time to bestow some knowledge to me on what I am sure is a highly noob-esqe situation. I would also like to say that I have thoroughly search this and other forums for my issue, unfortunately I dont think I understand CSS or any web design enough to comprehend the solutions given. I think this may require someone with the knowledge I lack to come down to my level... if you can bend that low.. and walk me thru layman term-style. Again thanks in advance for anytime spent helping out. That being said I was recently trying to jazz up my website that is hosted by a certain music community. I do a decent amount of business thru this site so I wanted to step up the interface a little and get away from using the standard page setup they give you. They do offer the option to edit CSS to construct your own for a little more customization. I jumped in, and after a few days of struggling, I got it looking how I wanted it. I was excited until I realized it looked different on almost every computer i visited the site on. My Background is fine, but the links to paypal and other content is all over the place(e.g. song player, twitter link, buttons) I have tweaked and tweaked, but have not been able to remedy this apparently common problem due to my lack of knowledge and experience. My only hope is to post the coding here and have a Smart Guy/Girl guide me in the right direction. I hope Im not asking too much guys... here goes (I know I can post my url here, how can I redirect you guys to veiw my site??) /********* SoundClick CSS Template (based on custom version Mon, Sep 28 2009) ***********/ Quote: /* general */ body {background: url((MyBGJPEGforbackground)); margin:0px;} body,div,tr,td,select,textarea,input,option {font-family:Verdana; font-size:11px;} a, a:link, a:visited {color:white; text-decoration:none;} a:hover {color:#ff0000; text-decoration:underline;} .pageFooter {clear:both; color:gray; padding:1px 0px 50px 20px;} .infoBox {width:650px; margin:50px auto; background:white; color:black; border:silver solid 1px; padding:30px; font-size:14px;} /* hardly used, its for error messages to user */ .infoBox .quotes {margin:20px; border:#4b4b4b dashed 1px; font-style:italic; padding:10px; background:;} /* main containers */ .mainTable {background: url((MainTableBGPicWentHere)) ; color:#999999; width:750px; margin-left:auto; margin-right:auto; text-align:center;} .mainContent {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:#999999; width:725px; float:left; overflow:hidden; margin:0px 0px 20px 5px;} /* IE6 doesnt support our preferred overflow:visible */ /* left navigation */ .navigation {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:white; width:300px; float:left; overflow:hidden; margin:10px 0px 20px 0px;} .navigation a:link, .navigation a:visited {color:#999999;} .navigation a:hover {color:#ffffff;} .navigationDivider {height:6px; line-height:6px; border-bottom:#232323 dashed 1px; margin-bottom:6px;} /* general elements */ .headline {background:transparent; color:transparent; font-weight:bold; border-bottom:transparent dashed 0px; border-top:transparent solid 0px; padding:330px 1px 50px 50px;} .headlineBig {font-size:22px; font-weight:normal;} .headlineSuppl {float:right; margin:0px 0px 0px 100px; color:#666666; font-size:11px; font-weight:normal;} /* for text/links on the right side of main headline (e.g. song count on main page) */ .headlineSuppl a:link, .headlineSuppl a:visited {color:#666666; text-decoration:none;} .headlineSuppl a:hover {color:black; text-decoration:underline;} .pageturner {background:; color:#cccccc; border:#4b4b4b solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} /* pages menu (previous, next..), e.g. on music page, message board */ .pageturner .nonactive {color:#666666;} .pageturner a:link, .pageturner a:visited {color:#cccccc; text-decoration:none;} .pageturner a:hover {color:#ff0000; text-decoration:underline;} .listedPicsBox {border:#4b4b4b solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;} .listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden} .breaker {height:1px; line-height:1px; clear:both} /* general color and font assets */ .color_supplemental {color:#666666;} /* used e.g. for song pages comments count */ .alternateBG0 {background:none;} /* used as background colors for comments */ .alternateBG1 {background:none;} /* alternate color */ /* main page (the default entry page) */ .mainContent .contHeadline {clear:left; font-size:16px; color:#cccccc; padding:1px 0px 2px 20px;} /* interview questions */ .mainContent .contText {clear:left; padding-left:15px;} .mainContent .contInterview {clear:left; padding-left:30px;} .mainContent .newsBox {clear:both; background:transparent; color:white; border:transparent solid 0px; margin:6px 20px 0px 20px; padding:100px;} /* main page: video box (different from video page) */ .videoBox_mainPage {padding:5px; margin:0px 100px 20px 100px;} .videoBox_mainPage .video {padding:5px; margin-bottom:10px;} .videoBox_mainPage .title {font-size:15px; text-align:center; margin-bottom:3px;} .videoBox_mainPage .shareLinks {float:right; padding:2px; border-bottom:#4b4b4b dashed 1px;} .videoBox_mainPage .labels {color:#666666; width:100px; padding-right:20px; text-align:right; float:left;} .videoBox_mainPage .info {padding-left:120px;} .videoBox_mainPage a:link, .videoBox_mainPage a:visited {font-size:13px; font-weight:normal; text-decoration:none;} .videoBox_mainPage a:hover {text-decoration:underline;} /* main page: upcoming shows */ .liveshowsBox {background:#cccccc; color:#000000; width:300px; margin:15px 2px 15px 10px; float:right; clear:right;} .liveshowsItems {padding:4px 0px 0px 0px; font-size:11px; clear:both;} .liveshowsBox a:link, .liveshowsBox a:visited {color:#000000; text-decoration:none;} .liveshowsBox a:hover {color:#666666; text-decoration:underline; cursorointer;} /* main page: standard song box on artist page (only this song box or the embedded player is used. Never both together) */ .playerBox {float:left; clear:left; padding-left:20px; margin:300px 0px 100px 0px;} .playerBox .playerHead {background:#000000; color:#cccccc; border-top:#4b4b4b solid 1px; border-bottom:#4b4b4b solid 1px; text-align:right; font-size:13px; padding:3px 5px 3px 3px;} .playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#666666; text-decoration:underline;} .playerBox .playerHead a:hover {color:#ffffff; text-decoration:underline;} .playerBox .songBox {background:#cccccc; border-bottom:#4b4b4b solid 1px; width:330px; padding:100px 0px 0px 1px; overflow:auto;} .playerBox .songBox .singleSong {color:#000000; font-size:13px; padding:1px;} .playerBox .songBox .singleSong:hover {background:#000000; color:#cccccc; cursorointer;} /* main page: VIP embedded player (only this embedded player or the standard song box is used. Never both together) */ .embeddedPlayer {margin:1px auto; width:750px;} /* main page: tabbed content headers (fans,stations) */ .tabbedCont_header li a:link, .tabbedCont_header li a:visited {background:#000000; color:#666666; text-decoration:none; margin:0px 20px 0px 0px; padding:3px 6px 3px 6px; border:#666666 solid 1px; border-bottom:none; } .tabbedCont_header li a:hover {color:white;} .tabbedCont_header li.selected a:link, .tabbedCont_header li.selected a:visited {background:#111111; color:#999999; border:#111111 solid 1px; border-top:#999999 solid 1px; font-weight:bold;} /* main page: fans, stations (tabbed content) */ .fansBox {padding:30px 20px 20px 20px; clear:both;} .fansBox a:link, .fansBox a:visited {} .fansBox a:hover {} .fancount {background:#111111; color:#666666; text-align:right; padding:3px 5px; margin-bottom:8px; font-size:11px; font-weight:normal; border-bottom:#232323 dashed 1px; border-top:#222222 solid 1px; } .fancount a:link, .fancount a:visited {color:#B8B8B8; text-decoration:none;} .fancount a:hover {color:#E6E6E6; text-decoration:none;} .fansBox_content {background:url(/images/siteNav/transbgblocks/black/bg_20.png) important; background:#111111;} .fansBoxLastLine {background:#111111; color:#666666; clear:both; text-align:right; padding:3px 5px; margin-top:8px; font-size:11px; font-weight:normal; border-bottom:#222222 solid 1px; border-top:#232323 dashed 1px;} .fansBoxLastLine a:link, .fansBoxLastLine a:visited {color:#B8B8B8; text-decoration:none;} .fansBoxLastLine a:hover {color:#E6E6E6; text-decoration:none;} .stationItem {clear:both; color:black; border-bottom:#4b4b4b dashed 1px; padding:0px 1px 0px 1px;} .stationPicBox {float:left;} .stationPics {width:70px; height:70px; background-position:center center; background-repeat: no-repeat; margin:0px 0px 1px 0px; overflow:hidden} .stationButtonsBox {float:left; padding:2px 15px 0px 5px; height:60px;} .stationsText {color:#999999; height:80px; overflow:hidden;} .stationlink a:link, .stationlink a:visited {color:#999999; font-size:16px; text-decoration:none;} .stationlink a:hover {color:#ff0000; text-decoration:underline;} /* music page */ .songsBox {border-bottom:#4b4b4b dashed 1px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;} .songsBox a:link, .songsBox a:visited {text-decoration:none;} .songsBox a:hover {text-decoration:underline;} a.songtitle:link, a.songtitle:visited {color:#999999; text-decoration:none; font-size:16px; font-weight:bold;} a.songtitle:hover {color:#ff0000; text-decoration:underline;} .songsBox .actionlinks {font-size:14px;} /* the links for full song info, add to station, rate this song... */ .songsBox .topSong {color:#666666; float:left; text-align:left; font-size:13px;} /* comments page */ .commentsWelcome {background:; color:#cccccc; margin:0px 20px 20px 20px; padding:20px; border:#4b4b4b solid 1px;} .commentsBox {border-bottom:#4b4b4b dashed 1px; padding-top:5px;} .commentsBox a:link, .commentsBox a:visited {text-decoration:none;} .commentsBox a:hover {text-decoration:underline;} .commentsBox .songComment {border-bottom:#4b4b4b dashed 1px; font-size:11px; padding:1px 3px; margin-bottom:5px;} .commentsBox .postdate {color:#666666; font-size:13px; font-weight:normal; text-align:right; margin:0px 5px 10px 0px;} .commentsBox .postdate a:link, .commentsBox .postdate a:visited {text-decoration:none;} /* for delete/edit links */ .commentsBox .postdate a:hover {text-decoration:underline;} .commentsBox .comment {font-size:14px; padding:0px 5px 0px 140px;} .commentsBox .bandSignature {border-top:#4b4b4b dashed 1px; color:#666666; width:310px; margin-top:15px; line-height:20px;} .commentsBox .ratingsBox {float:right; width:220px; border-left:#4b4b4b dashed 1px; margin-bottom:10px;} .ratingsBox .label {width:115px; text-align:right; float:left; padding-right:20px;} /* also used for .commentsPostBox .ratingsBox */ .commentsPostBox {padding:10px; margin:20px 0px; background:#FFCC99; color:#000000; border-top:black solid 2px; border-bottom:black solid 1px;} .commentsPostBox .ratingsBox {background:#ECECEC; color:#000000; clear:both; padding:7px 0px; margin:0px 250px 20px 30px;} /* video page */ .videoBox {background:black; color:#E0E0E0; padding:5px; line-height:22px;} .videoBox .video {padding:20px; margin-bottom:10px;} .videoBox .title {text-align:center; background:#121212; color:#F3F3F3; font-size:16px; padding:1px;} .videoBox .labels {color:#666666; width:200px; padding-right:20px; text-align:right; float:left;} .videoBox .info {float:left; width:440px;} .videoBox a:link, .videoBox a:visited {color:#0099CC; text-decoration:none; font-size:11px;} .videoBox a:hover {color:red; text-decoration:underline;} .videoListBox {border-top:#4b4b4b dashed 1px;} /* photo pages */ .photopage {background:black;} .selectedPhoto_box {text-align:center;} .selectedPhoto_box .selPhoto_title {background:#111111; color:#cccccc; border-bottom:#666666 solid 1px; font-size:15px; padding:4px;} .photolist {padding:10px 0px 0px 30px;} .photolist .photobox {background:none; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;} .photobox .photo {height:150px; width:118px; overflow:hidden;} .photobox .photoComment {color:#444444; font-size:11px;} .photolist .photobox_on {background:#222222; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;} .photobox_on .photo {height:150px; width:118px; overflow:hidden;} .photobox_on .photoComment {color:#999999; font-size:11px;} /* reviews page */ .reviewsBox {padding:10px 30px; border-bottom:#4b4b4b dashed 1px;} .reviewsBox .rev_headline {color:#cccccc; font-size:16px; font-weight:bold;} .reviewsBox .rev_text {padding:5px 5px 5px 30px; font-size:14px;} .reviewsBox .rev_source {text-align:right; font-size:13px; color:#666666;} /* licensing page */ .licenseSummary {margin:0px 20px 20px 20px; padding:20px; background:; color:#cccccc; border:#4b4b4b solid 2px;} .licenses {margin-top:70px;} .licenses .headline {font-size:14px;} .lic_tableSongs {border:none;} .lic_tableSongs .columnHeaders td {border-bottom:#4b4b4b solid 1px; font-weight:bold; font-size:11px;} .lic_tableSongs tr td {border-bottom:#4b4b4b dashed 1px; padding:5px 0px;} /* widgets page */ .widgetMargin { padding:8px 0px 8px 35px;} .widgetSpacer {width:100; height:15px; clear:both;} /* tag cloud */ .tagCloud {padding:10px;} .tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;} .tagCloud .cloudItem:hover {background:#005782; color:white; cursorointer;} .tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;} .tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;} .tagCloud .cloudS30 {font-size:11px; color:#999999;} .tagCloud .cloudS40 {font-size:12px; color:#999999;} .tagCloud .cloudS50 {font-size:14px; color:#666666;} .tagCloud .cloudS60 {font-size:16px; color:#666666;} .tagCloud .cloudS70 {font-size:18px; color:#333333;} .tagCloud .cloudS80 {font-size:22px; color:#333333;} .tagCloud .cloudS90 {font-size:28px; color:#111111; } .tagCloud .cloudS100 {font-size:36px; color:#111111;} .tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;} .tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;} .tagCloudMore a:hover {color:red; text-decoration:underline; cursorointer;} I've tried to insert a horizontal drop down CSS menu in my layout. However, the menu bar displays about 10 pixels lower in Firefox than it does in IE. <a href="(URL address blocked: See forum rules)">Link</a> I checked the margins, padding but can not seem to find a way to get the menu to display at the same position in both browsers. Any guidance is very appreciated. thanks. I've been working on putting a css/js text navigation together which thus far has seemed to work as intended on a PC. This morning when I checked it on a mac, it broke down. Technically it breaks down gracefully I suppose... All links are present and the nav is displayed fully expanded. The problem is that this nav is going to have hundreds of links, and having it fully expanded just isn't practical. If anyone could take a minute to look at my css & js to see if there's something simple that I'm missing, it'd be great. You can look at my example page he http://www.whitesagemedia.com/cssnav.html All css & js is included in the ssource - no attachements. Thank you, thank you, thank you, to anyone who can help me out. -Chet |
|||||||