|
CSS - Ie7 Zoom Feature Breaks Css Nav Bar
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; } Similar TutorialsHello. 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 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. 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. 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> Hi guys, I came across this scroll area on someone's webstie: www . nabil . com/film (no spaces) Does anyone know how to achieve this horizontal scroll area, or anything similar? thanks. 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. 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? I've created a website that uses position:fixed and would like to add a feature detector that would redirect users with incompatible browsers to an update page. I've been searching the web and haven't found any conclusive solutions specific too position:fixed and with redirection. Could anyone help? 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 There must be a better way to accomplish this... I need a line break between the two headers in the page below. As it stands it works in Firefox and IE with <br> tags but this seems sloppy.....Is this what the clear element is for? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
background-color:#cccccc;
}
#wrapper {
width: 700px;
height: 565px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
border: 1px solid #808080;
background-color:#ffffff;
}
#sidebar {
width: 123px;
height: 565px;
float: left;
background-image:url(images/sidebar.jpg);
}
#content {
margin-left: 125px;
height: auto;
width:auto;
padding: 30px;
font:Arial, Helvetica, sans-serif;
font-size: 24px;
font-style:oblique;
color: #444444;
}
#01 {
position:relative;
}
#02 {
position:relative;
margin-top:100px;
}
#b1w, #b2w, #b3w {
position:relative;
float:left;
height:35px;
width:35px;
border:1px solid;
border-color: #808080;
margin-top: 5px;
margin-right: 5px;
background-color:#ffffff;
}
</style>
<body>
<div id="wrapper">
<div id="sidebar"></div>
<div id="content">
<div id="01">Header 1</div>
<div id="b1w"></div>
<div id="b2w"></div>
<div id="b3w"></div>
<br><br><br>
<div id="02">Header 2</div>
</div>
</div>
</body>
</html>
Hey there. Is it possible to add a line break so that the following markup... html Code: Original - html Code <dl> <dt>Posts:</dt> <dd>33</dd> <dt>Topics:</dt> <dd>4</dd> </dl> <dl> <dt>Posts:</dt> <dd>33</dd> <dt>Topics:</dt> <dd>4</dd> </dl> ...looks like this? Posts: 33 Topics: 4 Basically, I want it to be like display: block, but only to the RIGHT of the text. Does that make sense? Just like adding a <br />, but with different HTML. Ok people, I have a page that contains 2 tables, one beneath the other... The table at the top can vary in height, but the table at the bottom is of fixed height... What I want to do is put some sort of "page break" in, so that the second table is always printed on a second piece of paper... Any ideas anyone? Hi: I have a MySQL/PHP generated form letter which gets printed and mailed. I have extablished a CSS font (class?) with a "page-break after" parameter as shown he PHP Code: h4 { font-family: Arial, Sans-serif; font-size: 14px; font-weight: 500; text-align: left; page-break-after: always;} This works great on a PC running IE. However, On a Mac, running OSX, the page breaks are entirely ignored and it is printed as a single long page. I have tried using other Browsers (Opera, Netscape, and Safari) and they all heve the same problem. Does anyone have a suggestion? Thanks Sean 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? Hi, This is the page i constructed using CSS. http://81.137.250.65/champs/main.html As you can see at the top of the page, when you hover links eg "about" , "booking" a drop down menu appears. This drop down menu calls a Javascript file which is using a stylesheet. "Style.css" for the formatting of the drop down menu. My colleague gave me some ASP.net code for the login form, as in the sample URL above the login form is not functional. As soon as i enter the asp.net code, all the formatting for the Drop Down menu breaks completely. The positioning, coloring etc is all lost. The menu appears at the bottom of the page, and the hyperlinks are all displayed as tradional blue underlined links. The page itself still appears fine, and doesnt seem to break. So the asp.net code is not affecting the css in the page itself, but the drop down menu I dont know if this is a asp.net problem or a CSS problem. My guess is that its the way the CSS for the drop down menu i setup? Ive only been doing CSS for about 6 weeks, so you will notice the code is not the neatest. I am open to constructive criticism. If anyone can help with this issue, i would appreciate it. Thank you eemo Can anyone give me a hint as to why the CSS drop-down menu on this page breaks in IE7: http://www.mediamogulsweb.com/ I've looked at it for while and I'm not getting anywhere. Thanks. I have coded my css file to display a border and change the background color of any text I put inside of <p> tags. It seems to work fine until I have to create a new line using <br> then it ignores everything after the <br> and strips the styling. My css is attached below: Quote: p.doubleSpaced { line-height: 200%; text-align: left; background-color: #eeeeee; border: #dddddd 2px solid; padding: 10px 15px; } My page can be viewed he http://dev.asbco.com/products/insti...al-recrational/ Thanks for the help! 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. Hi everyone, I am stumped at why I'm having this problem in FF only but I'd appreciate any input as to why it's happening. Take a look at www.spotabusiness.com in FF and see how there is a huge whitespace above the content regardless of what links you click. It looks fine in IE6 and 7. Thanks |
|||||||