CSS - My Div Tag Move Their Position When I Zoom In/out

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>

Hi 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.

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.

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?

On this page: http://lfswear(dot)com/sites/lfs2/index.php?main_page=product_info&cPath=1&products_id=8

I can't seem to get the "Size" div to move over right to match up with the color one... Any help would be greatly appreciated.

Hi, I am trying to get image on the bottom right hand side of the page to align with the chart in the middle.


I have it floated to the right, but I can't seem to make it move up vertically.

Not sure how to do this, absolute positioning is not an option because it will be stuck there regardless of browser size.

this is where the img is now, see how it is not lined up?
URL

this is where it is supposed to go.
URL


my code is this

Code:

<div style="float:right; vertical-align:baseline;"><img src="/free-gold-charts/gold.png" alt="Free Interactive Gold Charts" width="320" height="290" align="top"/></div>

and I have it next to the code for the chart.


Help!

Hi

I am creating a new site for a friend in Wordpress

ilovelifebecause.com

I can usually muddle through in css to make changes, but i'm stumped at the moment.

What I am trying to do is swap around the two cream coloured boxes so the larger one is on the right, the thinner one on the left and the blue box in the middle still. I've tried a number of things in the css file but can't seem to find the right method - can anyone help?

many thanks in advance
Paul

I'm trying to make a menu using only css basically when you hover over an li element if there is another level below it a div is moved into place to reveal the links. It is working for the top level, but I can't figure out why it won't display/work for the 3rd tier. Both the css and the html validated, a link and the code is below. Thanks for any advice.

edit: I can't actually post the link but I will PM it to anyone who wants to see it halfway working.

HTML:
-------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"edit:no links">
<html>
<head>
<title>Test Page for drop menu</title>
edit:there would be an include for the css here but I can't post anything resembling a link
</head>

<body>
<div id="menuHolder">
<ul>
<li><a href="#url">Advising Network</a>
<div class="subHolder">
<ul>
<li><a href="#url">Student PASSPort</a>
<div class="bottom">
<ul>
<li><a href="#url">Test 1</a></li>
<li><a href="#url">Test 2</a></li>
<li><a href="#url">Test 3</a></li>
<li><a href="#url">Test 4</a></li>
</ul>
</div>
</li>
<li><a href="#url">Adivsor PASSPort</a>
<div class="bottom">
<ul>
<li><a href="#url">Test 1</a></li>
<li><a href="#url">Test 2</a></li>
<li><a href="#url">Test 3</a></li>
</ul>
</div>
</li>
<li><a href="#url">Form Bank</a></li>
<li><a href="#url">Timeline</a></li>
<li><a href="#url">Videos</a></li>
<li><a href="#url">Contact</a></li>
</ul>
</div>
</li>
<li><a href="#url">Career Investigations</a>
<div class="subHolder">
<ul>
<li><a href="#url">Student</a>
<div class="bottom">
<ul>
<li><a href="#url">Test 1</a></li>
<li><a href="#url">Test 2</a></li>
<li><a href="#url">Test 3</a></li>
<li><a href="#url">Test 4</a></li>
</ul>
</div>
</li>
<li><a href="#url">Alumni</a></li>
<li><a href="#url">Parents and Family Members</a></li>
<li><a href="#url">Employers</a></li>
<li><a href="#url">eRecruiting</a>
<div class="bottom">
<ul>
<li><a href="#url">Test 1</a></li>
<li><a href="#url">Test 2</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><a href="#url">Campus Life</a>
<div class="subHolder">
<ul>
<li><a href="#url">Student and University Life</a></li>
<li><a href="#url">Student Activities</a></li>
<li><a href="#url">Commuter Services</a></li>
<li><a href="#url">Community Service Learning</a></li>
<li><a href="#url">USM Partnership with STRIVE U</a></li>
<li><a href="#url">USM Calendar of Events</a></li>
</ul>
</div>
</li>
<li><a href="#url">Scholarships and Finances</a></li>
<li><a href="#url">Academic Success</a>
<div class="subHolder">
<ul>
<li><a href="#url">Academic Strategies</a></li>
<li><a href="#url">Courses</a></li>
<li><a href="#url">Additoinal Support Resources</a></li>
</ul>
</div>
</li>
<li><a href="#url">Major Discovery</a>
<div class="subHolder">
<ul>
<li><a href="#url">Being Undeclared</a></li>
<li><a href="#url">GO Program</a></li>
<li><a href="#url">Aspirations - Early Study</a></li>
<li><a href="#url">Choosing Your Major</a></li>
<li><a href="#url">FAQ</a></li>
</ul>
</div>
</li>
<li><a href="#url">Orientation</a></li>
</ul>
</div>
</body>

</html>



CSS
-------------------
a {text-decoration:none; color:#ffffff;}

#menuHolder {height:60px; background:#0072ad; position:relative; text-align:center; width:1000px; font-size:16px; margin:0px;}

#menuHolder ul {list-style:none;}
#menuHolder ul li {float:left; padding:0px 10px 0px 10px; line-height:60px;}
.subHolder {position:absolute; left:0px; top:200px; overflow:hidden; font-size:14px; background:#0083ad;}

#menuHolder ul li:hover .subHolder {left:0px; top:60px; width:1000px; text-align:center; height:60px;}
#menuHolder ul li:hover {background:#0083ad;}

/* sub menu */
.subHolder ul {list-style:none;}
.subHolder ul li {float:left; padding:0px 10px 0px 10px; line-height:60px;}
.bottom {position:absolute; left:0px; top:500px; overflow:hidden; font-size:12px; background:#0094ad;}

.subHolder ul li:hover .bottom {left:0px; top:120px; width:1000px; height:60px; text-align:center; line-height:60px;}
.subHolder ul li:hover {background:#0094ad;}

/*bottom level*/
.bottom ul {list-style:none;}
.bottom ul li {float:left; padding:0px 10px 0px 10px;}

Hi,

Am editing a template within dreamweaver as it saves a lot of time for me but I can figure out how to move the right nav bar down.

Am trying to include a screenshot but i can't figure out how as I am a new user and it won't let me link..

Basically, it is a two column layout with a picture under the heading and the nav bar up to the height of the picture. Am looking to expand the picture out right and center meaning the nav bar will have to come down just below the picture if you know what i mean? I have tried with design view, won't let me. Had a look at the code but nothing really there that I picked up on (considering am only a beginner)..

any thoughts?

sorry I posted it again by mistake..

please delete

http://members.cox.net/sherry72/index.html


that is my website. I have a stats box to the right but i want it exactly to the right of my content box. It is underneath right now. How do i change the css to make it like i want it?

Hi,

I am looking to move my nav bar into the center

www.leehughes.co.uk

Am not sure how to do this, am worried about messing up the IE hacks..

Code:

ul#nav {
    height:1.75em;
    border-top:1px solid #000;
    border-bottom:1px solid #646060;
    list-style:none;
    margin:0; /* reset the default left margin in IE */
    padding:0 .5em 0 0; /* reset the default left padding in good browsers */
    background:#000;
    font-size:1em;
}
#nav li {
    position:relative; /* establish stacking context for the AP'd dropdown sublist */
    float:right;
    padding:0;
    line-height:1.75em;
}
#nav li a {
	float:left;
	padding:0 .5em;
	border-right: 1px solid #333;
	color: #CCCCCC;
	text-decoration: none;
}
#nav li a.first {border:none;}

#nav li:hover, 
#nav li.sfhover{ 
    background:#transparent;/* background for all links on hover */
    visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
}
#nav li:hover a, 
#nav li.sfhover a {color:#FFF;}/*1st level font color on hover*/

/*=== All Sublist Styles ===*/
#nav ul {
    position:absolute; /* position the sublist to nearest positioned ancestor, the (#nav li) in this case*/
    width:12em; /*150px*/
    margin-left:-999em;/* hide the sublist */
    padding:0;
    left:0; /* IE6/7 need this to position the sublist correctly on hover*/
    top:1.75em;
    background: url(fake-image.jpg);/* IE needs some sort of BG on the nested ul */
}
#nav li li {
    float: none;/*reset the float from #nav li*/
    display:block;
    height:auto;
    line-height:1.5;
    border:none;/*reset borders from #nav li*/
}
#nav li li a {
    float: none;/*reset the float from #nav li*/
    display:block;
    width:11em;/*IE6 needs a width (12em total with padding)*/
    padding:0 .5em;
	border:0;
}
* html #nav li li a {display:inline-block;} /*hide an overflow bug in IE6*/
*+html #nav li li a {display:inline-block;} /*hide same overflow bug in IE7*/

/*=== Hide All Sublists ===*/
#nav li:hover ul,
#nav li.sfhover ul {
    margin-left:-999em;
}
/*=== Sublist Font Colors ===*/
#nav li:hover li a, 
#nav li.sfhover li a  {color:#FFF;} /*2nd level font color*/

#nav li li:hover a, 
#nav li li.sfhover a  {color:#003366;} /*2nd level font color on hover*/

/*=== Second Level UL position on hover ===*/
#nav li:hover ul,
#nav li.sfhover ul { 
    margin-left: 0; /* show the sublist (line up with left border on main list items)*/
}

Thanks

Hi all,

Helping out a buddy, but am stuck myself. Possibly simple fatigue.

At this site, I'd like to move the entire center container up so that it's only about 20px below the very top. As of right now, when I do this, the top BG image disappears. As you can see from the CSS, there's actually two BG images.

I don't want that, I merely want the center container to cover the BG.

How, please?

Thanks!

Chris

http://www.dudley.nhs.uk/

In FF it all works fine but sometimes in I.E. left menus disappear and the right menu overlapping the text on the page isn't unknown. Although this is resolved by refreshing the page, it is happening quite regularly and is causing some confusion.

What do I need to add to my CSS to sort this toothache of a problem out?

Thanks