|
CSS - Slight Skew Of Header In Ie6
Hi everyone,
I'm working on a layout that looks fine in IE7 and in FF but when viewed in with IE6 the header graphics are slightly skewed. I'm not seeing any reason for the problem whatsoever so I'm thinking there needs to be some sort of hack to trick IE6 into displaying this correctly? I'd appreciate any thoughts on why this is happening. Here is the URL... http://www.karenwilliamson.com/joom/ Thanks Similar TutorialsIn Firefox my page is dropping the center orange header for some reason. And in IE the text under the orange headers is moving over for an image that is floated to it's left, even though the text div's left margin is set high enough to clear it. Any help would be apprciated. Page is he Code: 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></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
margin:0;
padding:0;
text-align: center; /* IE5/Win fix */
height:100%;
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#FFFFFF;
color:#333333;
}
#wrapper {
width:750px;
margin:auto;
position:relative;
}
#top {
width:750px;
height:60px;
padding:5px 1px 0 3px;
position:inherit;
}
#toplink {
height:60px;
width:365px;
margin-left:380px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666666;
}
#nav {
list-style:none;
width:416px;
float:right;
width:420px; !important
}
#nav li {
width:100px;
height:20px;
margin-left:4px;
float:left;
position:relative;
}
a.inactive, a.inactive:link, a.inactive:visited, a.inactive:active {
display:block;
height:15px;
background-image:url(images/inactive.gif);
background-repeat:no-repeat;
color:#999999;
text-align:center;
text-decoration:none;
padding-top:5px;
font-weight:bold;
}
a.inactive:hover {
color:#888888;
}
a.active, a.active:link, a.active:visited, a.active:active {
display:block;
position:absolute;
width:100px;
height:16px;
top:0;
left:0;
z-index:1;
background-image:url(images/active.gif);
background-repeat:no-repeat;
color:#334C99;
text-align:center;
text-decoration:none;
padding-top:5px;
font-weight:bold;
}
#subnav {
list-style:none;
/*list-style-image:url(images/subnav_arrow_blue.gif);*/
background-image:url(images/subnav_background1.gif);
height:22px;
clear:both;
border:1px solid #CECECE;
/*border-bottom:0;*/
color:#999999;
}
#subnav li {
width:124px;
height:18px;
text-align:center;
float:left; /*Change order of subnavs high to low or low to high*/
}
#subnav li a, #subnav li a:link, #subnav li a:visited, #subnav li a:active {
display:block;
height:14px;
padding-top:4px;
text-decoration:none;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color:#999999;
}
#subnav li a:hover {
color:#888888; /*CHANGE ME TO BLUE, ORANGE, OR SOMETHING*/
}
#subnav li a:active {
color:#334C99;
}
#midbanner {
height:170px;
background-image:url(images/banner.gif);
margin-bottom:3px;
}
#bottomcontent {
text-align:left;
color:#000000;
}
#leftboxes {
width:190px;
height:auto;
padding:5px 8px 0 1px;
float:left;
border-right:1px dashed #cccccc;
}
.leftbox, .leftboxBottom {
height:80px;
width:98%;
border:1px solid #8D8D8D;
background-image:url(images/leftboxstripSM.gif);
background-repeat:repeat-x;
background-position:top;
color:#334C99;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
padding-top:2px;
}
.leftbox{
margin-bottom:10px;
}
#rightboxes {
width:535px;
padding:5px 0 0 0;
margin-left:210px;
}
.rightbox1, .rightbox2, .rightbox3 {
position:relative;
height:176px;
width:165px;
background-image:url(images/teststrip8z.gif);
background-repeat:no-repeat;
background-position:top;
color:#ffffff;
font-weight:bold;
}
.rightbox1 {
float:left;
}
.rightbox2 {
margin-left:183px;
}
.rightbox3 {
float:right;
}
.packagetitle {
margin: 5px 0 0 28px;
font-size:12px;
}
.packagecontent {
margin: 12px 0 0 50px;
font-size:9px;
font-weight:normal;
color:#666666;
line-height:15px;
}
.packageimg1, .packageimg2, .packageimg3 {
width:45px;
height:49px;
margin:25px 0 0 0;
background-repeat:no-repeat;
float:left;
}
.packageimg1 {
background-image:url(images/pkg_personal1.gif);
}
.packageimg2 {
background-image:url(images/pkg_smallbiz1.gif)
}
.packageimg3 {
background-image:url(images/pkg_corporate1.gif);
}
#bottombox {
height:80px;
width:535px;
margin-top:10px;
border:1px solid orange;
}
/* hide from IE/Mac \*/
* html #bottomcontent,* html #midbanner {
width:750.5px;
wid\th:750px;
}
/* end hide */
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="toplink" align="right"><img src="images/arrows2_1.gif">Client Login</div>
</div>
<ul id="nav">
<li><a class="active" href="#">Home</a></li>
<li><a class="inactive" href="#">Hosting</a></li>
<li><a class="inactive" href="#">Tools</a></li>
<li><a class="inactive" href="#">About</a></li>
</ul>
<ul id="subnav">
<li><a href="#">Subnav 1</a></li>
<li><a href="#">Subnav 2</a></li>
<li><a href="#">Subnav 3</a></li>
<li><a href="#">Subnav 4</a></li>
<li><a href="#"><img src="images/subnav_arrow_orange1_2.gif" border="0">Subnav 5</a></li>
<li><a href="#">Subnav 6</a></li>
</ul>
<div id="midbanner"></div>
<div id="bottomcontent">
<div id="leftboxes">
<div class="leftbox"><img src="images/bluearrows2.gif">Service Gurantee</div>
<div class="leftbox"><img src="images/bluearrows2.gif">Earn $ For Referrals</div>
<div class="leftboxBottom"><img src="images/bluearrows2.gif">Domain Lookup</div>
</div>
<div id="rightboxes">
<div class="rightbox1">
<p class="packagetitle">PERSONAL</p>
<div class="packageimg1"> </div>
<div class="packagecontent">
<p>300MB Disk Space</p>
<p>3GB Transfer</p>
<p>Unlimited Subdomains</p>
<p>Unlimited Emails</p>
<p>Unlimited Databases</p>
<p>Free Setup</p>
<p>24/7 Support</p>
</div>
</div>
<div class="rightbox3">
<p class="packagetitle">CORPORATE</p>
<div class="packageimg3"> </div>
<div class="packagecontent">
<p>1000MB Disk Space</p>
<p>8GB Transfer</p>
<p>Unlimited Subdomains</p>
<p>Unlimited Emails</p>
<p>Unlimited Databases</p>
<p>Free Setup</p>
<p>24/7 Support</p>
</div>
</div>
<div class="rightbox2">
<p class="packagetitle">SMALL BUSINESS</p>
<div class="packageimg2"> </div>
<div class="packagecontent">
<p>500MB Disk Space</p>
<p>5GB Transfer</p>
<p>Unlimited Subdomains</p>
<p>Unlimited Emails</p>
<p>Unlimited Databases</p>
<p>Free Setup</p>
<p>24/7 Support</p>
</div>
</div>
<div id="bottombox">Ad #4</div>
</div>
</div>
</div><!--end Wrapper-->
</body>
</html>
I am trying to set up four menus on the same page. Please view draft at www.tallnorwegian.com/meyer.htm I am struggling with the menu in the top left corner. The positioning of the first and second level layer. The left menu is meant to mirror the functionality of the right hand side menu. I've torn most of my hair out.... Can anyone help me - and have a look? Much appreciated, Sigi. Hey, I have just about finished this website here except for the footer issue in Internet Explorer. My main issue is that I'm limited to a Macbook Pro right now, I have VM Fusion but haven't been able to use my external harddrive with my virtual machine on it and have no other way to test in IE. Browsershots has it's limitations, haha. Anyway, it displays fine in WebKit and Firefox, but internet explorer is being real finnicky. If I have to I can resort to calling in a modified footer strictly for IE, but then I have to go design a footer for it down at the library so i can use on of their computers to test it. Thought I'd try posting a question here and see if anyone could spot something in my CSS that may not be working with IE. Thanks in advance, really appreciated. The link is http://www.laserbodysculpting.ca/beta/ The screenshots in IE are MSIE7.0 and IE6.0 . I'm using the following DIV structure. (http://pastebin.com/meef27b4) Code: <div id="footer"> <div id="fcont"> <div id="f1" class="fwrap"><h2>Newsletter</h2> ... </div> <div id="f2" class="fwrap"><h2>Map</h2> ... </div> <div id="f3" class="fwrap"><h2>Contact</h2> ... </div> </div> <div id="minifooter"> ... </div> </body> </html> Here is the CSS Code: #footer {
width: 100%;
height: 270px;
position: static;
clear:both;
text-align: center;
border-top:solid 1px #414243;
background:#9a9a9a;
letter-spacing: 0.2em;
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
#footer h2{
font-size: 15px;
color: #414243;
padding:0 0 .5em .1em;
}
.info {
color:#fff;
}
.map {
border: 1px #414242 solid;
margin: 2px;
}
#footer h3{
font-size:10px;
padding:0 0 .5em 0;
letter-spacing:5px;
color:#414243;
font-weight:bold;
}
#fcont {
width:100%;
margin-left:200px;
overflow:auto;
}
#minifooter {
clear:both;
width: 100%;
height: 15px;
padding-bottom:10px;
border-top:solid 1px #000;
background:#414243;
color: #fff;
letter-spacing: 0.2em;
}
#minifooter a:hover {
color:#fff;
}
#f1 {
display: inline;
float:left;
text-align: left;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
width: 300px;
}
#f2 {
display: inline;
text-align: left;
float:left;
position: relative;
margin-top: 10px;
width: 300px;
}
#f3 {
display: inline;
text-align: left;
float:left;
position: relative;
width: 300px;
margin-top: 10px;
}
http://tinyurl.com/5llwfl I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down. I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes. I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either. I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally. Hi all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. Post resolved -- css controlled by unmentioned files. (apologies for duplicate post, was sure that was "edit" but must not have been) How do i stop the <h1> add white space above and below anything in the header tag. I'm currenty working on a website, and header is really starting to get on my nerves. If you go to http://www.techtalk.l2p.net/tab/index.php you can see what I have done so far. Well, I have a few problems. When trying to log in, and you press tab to go from Username to Password, it goes to the Login link instead. After filling in the Password field, and you press Enter, nothing happens. When the browser is resized, the whole header gets messed up. I was thinking some CSS could help it work, but I have no idea where to start. Any help would be appreciated. Hi, I am working on a design for one of my websites and have run into a little bit of a problem. I am hoping one of you guys can help me out. I am relatively new to coding with css and have read a bunch of tutorials but cannot for the life of me figure out how to convert the following table into divs: Code: <table border=0 width=100%> <tr> <td rowspan=3>logo</td> <td rowspan=3>navigation bar</td> <td>some links</td> </tr> <tr> <td>search box</td> </tr> <tr> <td>more links</td> </tr> </table> Basically its the header part of the design, I have the rest of it done without much problems. I have tried everything but cannot get it to look like the table. Any help will be greatly appreciated. Thanks, Hello, my name is Jordan, and I run breatheheavy (can't post the URL) I have a new header designed that's 1665x515px. I am having a little trouble putting it on the website because of the current restrictions placed in Wordpress on the header.php and style.css files. When I uploaded the header and changed the settings in Wordpress, it didn't look correct on all browsers or the iPad. I was hoping to get some help from someone that could help me with this and make it compatible with all browsers / mobile version. You can see the site on an ipad simulator site (also can't post the link) Thanks for reading Sending good vibes your way, Jordan Why is the second header on his site is located at the bottom of the page, I can't seem to figure it out. Can anyone take a look at the page and maybe point me in the right direction? The url is <NO LONGER AVAILABLE> I know that is has to have something to do with #clearheader1 or #clearheader2 calls. Maybe where they are placed or something. Hi, How do I indent my H1 tag as they are too close to the edge of the page. I tried all the functions for a <p> but they dont work for headers Thanks hi my site uses class i press, a wordpress theme (www,grimsbyforsale,com) how do i make my header bigger so my logo image does not overlap? what values on what code would i need to change i am new to all this ? what in gods name am I doing wrong? I want the header image to scale with the web page, I can't stand how it shows the scroll bar when you resize firefox's window. themidnighter .ca/test Thanks! Hi, i have a computering, games blog and i wanted to change the layout by adding a foter and header ( it is a wordpress blog ) now you see that i included a header but it isnt centered and the body background keeps going to the top how can i change this? http:// filehut.5gigs. com And if it is possible i would like to insert that image ( yet turned around) in the footer Thanks for helping guys Hello. I'm presently writing a JavaScript applet which will be included into websites to produce a dynamically created header and footer through PHP. That's not important for the most part. What I would like to do is create the header and footer through CSS. I do, howver, have a slight problem. I can not have the user edit their websites in any way except for adding the script inclusion. (<script language="javascript" src="http://webaddress/script.js">) Now, this is what I've come up with for the CSS. css Code: Original - css Code body { padding: 25px 0 25px 0; } .ixga_header { position: fixed; font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #EAEAEA; top: 0; left: 0; } .ixga_header table,tr,td { font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #FFFFFF; } .ixga_header a, a:visited { font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #EAEAEA; } .ixga_header a:hover { font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #EAEAEA; } /* hide from mac ie5 \*/ .ixga_header { position: absolute; } /* end hide from mac ie5 */ html>body .ixga_header { position: fixed; } .ixga_footer { position: fixed; font-size: 11px; font-family: Verdana, Helvetica, sans-serif; color: #EAEAEA; bottom: 0; left: 0; } .ixga_footer table,tr,td { font-size: 11px; font-family: Verdana, Helvetica, sans-serif; color: #FFFFFF; } .ixga_footer a, a:visited { font-size: 11px; font-family: Verdana, Helvetica, sans-serif; color: #EAEAEA; }
body {
Does this seem right to you? Now, the HTML injected by the remote script is as follows. html Code: Original - html Code <div class="ixga_header"> <link href="http://localhost/header/header.css" rel="stylesheet" type="text/css" media="all" /> <table width="100%" height="25" border="0" cellpadding="0" cellspacing="0"> <tr height="25" style="background-image:url(\'http://localhost/header/images/bg.gif\')"> <td align="left"> <b> <a href="http://gaming.localhost"> Gaming Network </a> </b> - <a href="http://ds.localhost"> Demonic Sights: The Adventure Begins </a> - <a href="http://ds2.localhost"> Demonic Sights: The War of Aegis </a> - <a href="http://ta.localhost"> Total Apocalypse </a> </td> <td align="right"> <a href="http://localhost/login.php">Login</a> | <a href="http://localhost/register.php">Register</a> </td> </tr> </table> </div> <div class="ixga_footer"> <table width="100%" height="25" border="0" cellpadding="0" cellspacing="0"> <tr height="25" style="background-image:url('http://localhost/header/images/bg.gif')"> <td align="left"> This is a test footer. Woo. </td> </tr> </table> </div>
<div class="ixga_header">
<link href="http://localhost/header/header.css" rel="stylesheet" type="text/css" media="all" />
<table width="100%" height="25" border="0" cellpadding="0" cellspacing="0">
<tr height="25" style="background-image:url(\'http://localhost/header/images/bg.gif\')">
<td align="left">
<b>
<a href="http://gaming.localhost">
Gaming Network
</a>
</b>
-
<a href="http://ds.localhost">
Demonic Sights: The Adventure Begins
</a>
-
<a href="http://ds2.localhost">
Demonic Sights: The War of Aegis
</a>
-
<a href="http://ta.localhost">
Total Apocalypse
</a>
</td>
<td align="right">
<a href="http://localhost/login.php">Login</a>
|
<a href="http://localhost/register.php">Register</a>
</td>
</tr>
</table>
</div>
<div class="ixga_footer">
<table width="100%" height="25" border="0" cellpadding="0" cellspacing="0">
<tr height="25" style="background-image:url('http://localhost/header/images/bg.gif')">
<td align="left">
This is a test footer. Woo.
</td>
</tr>
</table>
</div>
The problem I face is that any HTML on the original page somehow gets shoved UNDER the footer, no matter the case, as if it just shoves the data that SHOULD be there into the footer division itself. Can someone please suggest a better method I can take of doing this? Or perhaps point me to a resource where I can see how to dynamically add a header and footer to a webpage through CSS _WITHOUT_ having to include a division for the page contents itself? This needs to work out of the box. Thanks in advance. OK, my site looks good in every browser except IE. Here's the site: here Can someone tell me how to fix the CSS for IE? thanks Hi, I'm new to CSS and am using the weebly website builder. I need to add a link to my header image. Could anyone help me with this? This is the CSS: #header{ width: 961px; height: 141px; border-top: 2px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc; border-bottom: 1px solid #cccccc; } .weebly_header{ background: url(%%HEADERIMG%%) no-repeat; } thank you! I'm trying to get two images in my header/logo section. One is a logo with the site title etc, which I want to sit in the direct center of the header section, the other is a repeating gradient which I want to repeat across the page. I'm struggling to get the first image to sit on top of the second. |
|||||||