|
CSS - Fixed Elements Are Not In The Right Place In Ie
I would like to have a header on my page with my logo in the top left corner, and a cloud image going the rest of the way across the top. I set up the cloud image as a background, but wanted the logo to be clickable so it is set up in the html as an image.
The problem is that I want the image to be fixed in the corner so that when the visitor scrolls, it stays at the top. It looks good in Firefox and in Chrome, but in IE it is a few pixels offset from the corner and I have no idea how to fix it. See what I mean he felixairservices.com Here is my css for the logo: Code: body
{
background:#6699BB url('sky.jpg') no-repeat top right fixed;
background-size: 90% 228px contain;
}
img.logo
{
position:fixed;
top:0px;
left:0px;
margin:0;
padding:0;
border-style:none;
}
And here is the html I am using to display it: Code: <a class="logo" href="index.html" border="0"><img class="logo" src="Logo.jpg" valign="top" align="left" border="0"></a><br> Any help would be appreciated. I'm just a simple AC contractor trying to build a decent web page for my business. Similar TutorialsWhen I view my Dreamweaver CS4 html page on Firefox, the AP elements I used on it are not viewing properly. They are getting bumped down a bit and thus misaligning with other elements on the page. Any suggestions? Thanks. Hello, I'm new here and in desperate need of your help. What I'm trying to accomplish is this: http:// i29.tinypic.com/259inue.jpg There are two problems. 1) How do I place two sidebars next to each other? 2) How do I keep the header and the sidebars fixed, and the content the only element that you can scroll in? Any hints would be greatly appreciated! Sorry about my Engish, I'm afraid it's not very good. I'm working on a site with a div element with a fixed position, some 800 pixels from the left. The site is optimized for 1024x768. However, if a user with a resolution of 800x600 views the page, this div element will be missing, and the user won't be able to scroll over to see it. Is there some way I can get around this? One idea would be to align the div on the right instead of the left, but I don't want a lot of whitespace between my content (on the left) and my div (on the right). I was hoping that I could specify a parent element with a relative position, and that position: fixed would reference the position of the parent element, but that only seems to work when the child div element is position:absolute, not position:fixed. Thanks for any insight. Hi everyone, this is my first post and I hope it's easily resolved. I'm new to CSS and working through CSS - The Missing Manual while slowly overhauling an old table-based web journal on the side. I'm trying to do the following: Left - navbar (~200px) Center - journal postings (~600px) Right - fixed image (~200px) // I want this to always be in sight I've gotten the first two nailed down nicely, but I'm having a really hard time with getting the fixed image to work. In extreme shorthand, the code relationship looks like this: <body> <nav-journal-image-wrapper width=1000> <nav-journal-wrapper width=800> <nav width=200> <journal width=600> </njw> </njiw> With the extra 200px of width in the final wrapper, I've been able to get the background image to be fixed and show nicely to the right of my navbar and journal post by making it the same 1000px in width. If the window is stretched, everything stays where it belongs - you just see more body background color. The problem is, when the window is condensed the final wrapper - despite having a set width - also is squeezed and my background image recedes under the journals. What I don't understand is why my navbar and journals seem impervious to small windows, but the wrapper around them with the background image is not? My code validates, and the relevant parts of the CSS start now: Code: <style type="text/css">
body {
background-color:#333;
}
/* without this wrapper, the background in #nav-post-portrait-wrapper aligns
with the screen right, not the wrapper's right */
#final-wrapper {
background-color:red;
width: 1034px;
margin: 0 auto 0 auto; padding: 0;
}
/* this gives me an extra 200px on the right to show the fixed background image */
#nav-post-portrait-wrapper {
margin: 0;
padding: 0;
width: 1034px; /* sets the max but doesn't seem to be preventing collapse */
background-color: white;
background-image: url(CSS-TESTING/background-portrait-2.png);
/* the image is also 1034px wide - I want this wrapper's width to be frozen! */
background-repeat: no-repeat;
background-position: top;
background-attachment:fixed;
}
/* this groups the navbar and postings together */
#nav-and-post-wrapper {
background-color:#0F0;
margin: 0;
padding: 0;
width: 828px; /* prevents collapse */
}
/* begin nav sidebar CSS code */
#mainNav-wrapper {
float: left;
top: 0;
margin: 0; padding: 0;
height: 312px;
width: 210px;
}
ul#mainNav {
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
width: 200px;
border-left: 2px solid #930;
border-top: 2px solid #930;
border-right: 2px solid #930;
}
ul li {
width: 200px;
margin: 0; padding: 0;
height: 60px;
border-bottom: 2px solid;
border-bottom-color:#930;
}
/* end nav sidebar CSS code */
/* begin journal post CSS code */
#post-wrapper {
margin-left: 214px;
}
.post {
background-color:#6F9;
border: 2px solid #930;
width: 600px;
height: auto;
margin: 20px 0 0 0;
padding: 0;
}
/* end journal post CSS code */
</style>
<body bgcolor="#FFFFFF">
<div id="final-wrapper">
<div id="nav-post-portrait-wrapper">
<div id="nav-and-post-wrapper">
<div id="mainNav-wrapper">
<ul id="mainNav">
<li><a href="aboutme.htm" id="nav-about-me"></a></li>
<li><a href="journalmain.htm" id="nav-journal-main"></a></li>
<li><a href="beverageguide.htm" id="nav-beverage-guide"></a></li>
<li><a href="guestbook/index.php" id="nav-graffiti"></a></li>
<li><a href="contact.htm" id="nav-contact"></a></li>
</ul>
</div>
<div id="post-wrapper">
<div class="post">
la la la
</div> <!-- closes post div class -->
<div class="post">
la la la
</div> <!-- closes post div class -->
<div class="post">
la la la
</div> <!-- closes post div class -->
<div class="post">
la la la
</div> <!-- closes post div class -->
<div class="post">
la la la
</div> <!-- closes post div class -->
</div> <!-- closes post-wrapper div id -->
</div> <!-- closes nav-and-post-wrapper div id -->
</div> <!-- closes nav-post-portrait-wrapper div id -->
</div> <!-- closes final-wrapper div id -->
</body>
Thank you very much! Hi, I have been puzzle for a while now working out how to do this. I have two fixed height divs which I want to appear on the same line (inline). However to maintain the fixed height they cannot be set as display: inline; (Well that works in IE but not in Firefox). Anyway I find out that setting one div to float left and the other to float right with another div with clear:both works fine. However when it comes to setting the position of the flash elements I want in each div element it works now in Firefox but not in IE. I currently have: <div id="diva"> <object id="face1" width="320" height="110"> <param name="face1" value="face1.swf"> <embed src="face1.swf" width="320" height="110"> </embed> </object> </div> <div id="divb"> <object id="face2" width="320" height="110"> <param name="face2" value="face2.swf"> <embed src="face2.swf" width="320" height="110"> </embed> </object> </div> <div id="clear"></div> With the relavent css: #div1 { background-image : url(images/bg1.gif); width: 381px; height: 346px; float: left; text-align : center; vertical-align : bottom; } #div2 { background-image : url(images/bg2.gif); width: 381px; height: 346px; float: right; text-align: center; vertical-align : bottom; } #clear { clear: both; } img { border: 0px; } #face1{ padding-top: 220px; left: 30px; } #face2{ position: relative; top: 220px; left: 10px; } Effectively what I want is: Where the divs are on the same line and are fixed height (as they have a background) and then each swf element releatively positioned inside the div...which will work in Firefox and IE! Thank you for your time. Hi! Is it possible to align vertically block elements in a fixed-height (unknown) container? If not, this is a serious shortcoming of the css model of placing objects on the screen. Thanks! How can I fix a Div a set distance below another Div without a set height? 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. Hello all, I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code:
#wrapper-body ul.staff-list{
list-style-type:none;
padding-top:10px;
position:relative;
}
#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
#wrapper-body ul.staff-list li{
float:left;
width:230px;
position:relative;
padding:8px 0 8px 15px;
z-index:1;
}
#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
#wrapper-body ul.staff-list li p{
padding:0 0 9px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list li small{
padding:0 0 5px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list-clerks li span{
color:#A6302B;
display:block;
float:left;
}
#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
#wrapper-body ul.staff-list li div.staff-list-detail{
display:none;
background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
padding-bottom:3px;
margin-top:-15px;
left:4px;
z-index:10;
top:15px;
position:absolute;
}
#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }
#wrapper-body ul.staff-list li:hover div.staff-list-detail{
display:block;
}
An image of what is happening below: Thanks for reading! Hi, after having the problem with the div's in IE I got a new problem. I got a clock placed in my sidebar and under it there is some text. In FF it's placed right but in IE not again :S How can I fix this? Link: www.windmolentechnologie.tk Code: index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Windmolentechnologie</TITLE>
<LINK HREF="http://windmolentechnologie.webs.com/css/default.css" REL="stylesheet" TYPE="text/css" />
<style type="text/css">
.hiddenPic {display:none;}
</style>
<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript" src="http://windmolentechnologie.webs.com/js/nav1.js"></script>
<script type="text/javascript" src="http://windmolentechnologie.webs.com/js/klok.js"></script>
<script src="http://static.freewebs.getclicky.com/44044479.js" type="text/javascript"></script><noscript><img alt="Clicky" src="http://in.freewebs.getclicky.com/44044479-fwdb4.gif" /></noscript>
</HEAD>
<BODY>
<div id="container">
<div id="nav">
<img src="http://windmolentechnologie.webs.com/images/Nav2.png" USEMAP="#nav" border="0" name="nav1">
<map name="nav">
<area shape="rect" coords="261,40,339,120" href="home.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt1')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="341,40,419,120" href="inhoud.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt2')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="421,40,499,120" href="logboek.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt3')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="501,40,579,120" href="profielen.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt4')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="581,40,659,120" href="bedrijven.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt5')" onMouseOut="imageChange('nav1','alt0')" />
</map>
</div>
<div id="banner">
</div>
<div id="content">
<div id="new">
<table id="klok">
<td id="kloktd">
<img src="dg8.gif" name="hr1"><img
src="dg8.gif" name="hr2"><img
src="dgc.gif" name="c"><img
src="dg8.gif" name="mn1"><img
src="dg8.gif" name="mn2"><img
src="dgc.gif" name="c"><img
src="dg8.gif" name="se1"><img
src="dg8.gif" name="se2">
</td></table>
<p id="new1">Dit is een testlijntje</p>
<p id="new2">lolololol</p>
<p id="new2">what happens if this line is a little bit too long for the box?</p>
<p id="new3">fredje pietje ludo</p>
</div>
<div id="inhoud">
<iframe name="iframeinhoud" src="home.html" frameborder="0" height="500" width="540" scrolling="no" allowtransparency="true"></iframe>
</div>
</div>
<div id="footer">
</div>
</div>
<img src="http://windmolentechnologie.webs.com/images/InhoudHome.png" alt="InhoudHome" title="InhoudHome" height="500" width="540" class="hiddenPic">
<img src="http://windmolentechnologie.webs.com/images/InhoudLog.png" alt="InhoudLog" title="InhoudLog" height="500" width="540" class="hiddenPic">
</BODY>
</HTML>
Code: css (will make this shorter later)
html {
margin:0;
padding:0;
height: 100%;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
body {
background-color: #f2f3ed;
margin: 0px;
padding: 0px;
height: 100%;
z-index:0;
position:relative;
text-align: center;
}
#container {
position:relative;
height:auto !important;
min-height:100%;
width: 760px;
margin:0 auto;
}
#nav {
width:100%;
height:160px;
background: url(../images/Nav.png) no-repeat;
}
#banner {
width:100%;
height:101px;
background: url(../images/Banner.png) no-repeat;
}
#content {
width:100%;
height:500px;
background:transparent;
}
#new {
background: #e6e8dc url(../images/New.png) no-repeat;
width:220px;
height:500px;
float:left;
text-align: left;
}
#inhoudhome {
background: #e6e8dc url(../images/InhoudHome.png) no-repeat;
width:540px;
height:500px;
float:left;
text-align: left;
}
#inhoudlog {
background: #e6e8dc url(../images/InhoudLog.png) no-repeat;
width:540px;
height:500px;
float:left;
text-align: left;
}
#inhoudprof {
background: #e6e8dc url(../images/InhoudProf.png) no-repeat;
width:540px;
height:500px;
float:left;
text-align: left;
}
#footer {
background: url(../images/Footer.png) no-repeat;
height:50px;
width:100%;
position:relative;
}
p#inhoud1 {
margin:35px 5px 0px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#inhoud2 {
margin:0px 5px 0px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#inhoud3 {
margin:0px 5px 10px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#new1 {
margin:35px 5px 0px 25px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#new2 {
margin:0px 5px 0px 25px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#new3 {
margin:0px 5px 10px 25px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
table.tabellog {
border-collapse: collapse;
margin:37px 25px 10px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
table.tableprof1 {
border-collapse: collapse;
margin:37px 25px 5px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
table.tableprof2 {
border-collapse: collapse;
margin:5px 25px 5px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
table.tableprof3 {
border-collapse: collapse;
margin:5px 25px 10px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
td {
padding:5px;
border-width: 1px;
border-style: solid;
}
td.datlog {
text-align:center;
font-weight:bold;
width:90px;
}
td.omschlog {
font-weight:bold;
}
td.tijdlog2, td.datlog2 {
text-align:center;
}
td.tijdlog {
text-align:center;
width:100px;
font-weight:bold;
}
td.kol1 {
font-weight:bold;
width:125px;
}
td.kol1foto {
width:100px;
height:125px;
}
table {
border-color:#000;
}
table#klok {
margin:64px 5px 0px 57px;
border-width:0px;
}
td#kloktd {
height:45px;
border-width:0px;
}
Hi! I've got a problem thats driving me mad. i got two divs inside my Content-div. The Text-div and the Box-div at the moment they are arranged like this: data.fuskbugg.se/dipdip/thisishowitis.jpg In the Box-div i've inserted two pictures that i want vertical aligned and the Box-div should be to the right i want it to look like this data.fuskbugg.se/dipdip/howitshouldbe.jpg with the Text-div and the Box-div next to each other. NOT on top of each other PLEASE help me out / Dippah Is it possible to use CSS to place one image over the top of the other? For what I mean go he celticblues dot com/test/test.html I could do the same thing via photoshop, but I want to do it with CSS as I have several to do and I am not sure of the relative sizes yet and don't want to keep redoing the photoshop thing. Ed Hi Everyone, I've been trying for weeks now to get my footer to sit at the bottom of my screen. I've read all of the how-to articles regarding footers and tried what seems like everything! After some investigation with Firebug I've determined that my problem seems to be some of my "wrapper" divs. My container and pagewrapper divs should be encompassing everything on the screen but they are not. If you wouldn't mind taking a look for me, I would REALLY appreciate it. Right now I have the grey footer just chillin' in the middle of the page as you can see. www.RoundtopRiders.com/v2/ THANK YOU!!! Jason Hi I would like to know where should I go to get an easy, small script so that I can use multi-level drop down menus in my website? I googled and came up with a supposed menu framework.. it looked easy but when I tried it, it didnt work.. Hello. This is the first time I've tried a complete CSS layout, and I just have one bothersome problem. I have everything inside a #container div. I have a min-height set for the container, since in Firefox if I don't have that it just wraps the border around the background image. No matter where I put the footer div, it hangs over the min-height border. However, if I put footer inside another tag called content ( #content #footer { ) it does stay in. But I don't even have a content div in the css! I'm so confused. *lol* Furthermore, by using Float for the navigation div instead of absolute positioning, it shows up with several pixels difference between IE and Firefox. If anyone could help me with this, I would be much obliged. The page is he http://frenziedsilence.com/nygiml/index.php And the CSS: http://frenziedsilence.dom/nygiml/nygiml.css thanks in advance.. -kathryn Hi, I have a problem with creating a CSS banner div. I can't seem to get the .centeredbox to the absolute top of the page, while keeping it centered with auto margin: Code: <html>
<head>
<title>Untitled Document</title>
<style>
.wrapperbox {text-align: center; }
.centeredbox {width: 682px; margin: 0 auto 0 auto; text-align:left; background-color: #000000;BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 11px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid;}
</style>
<div class="wrapperbox"></div>
<div class="centeredbox"></div>
</head>
<body>
</body>
</html>
With this code it keeps a little space between the div and the top of the page. I don't want that space . Does anyone have a solution? Hey everyone, i'm having a bit of trouble with a page i'm making, it seems no matter what i do this one div one left align some text in it. It seems to center everything and i cant stop it from doing it, also the div's inside wont all be on the same line as in one after the other it's the Latest Blog section. hxxp://24.141.168.102:8080/ar/?page=blog That's my personal web server i use so if someone could have a look at this and get back to me i'd really appreciate it. i have a site that if the page isn't cached, some of the content starts like, at the top of the page and then shifts in to it's positioned place. why does this happen? how can i stop it? Hello, I have made playersnutrition.com As you can see, when you go to another page, the menu dosent stay at the top. How do I make it stay at the top???? does anyone know how i can place my menu on the right spot. this is the website Site the menu is supposed to be placed on this spot ( this is an older version of the layout): Old Layout but i cant get the css-menu there >.< the code for its position Quote: #navcontainer ul { margin-left: 1; padding-left: ; as u can see, margin is 1 and already its too far! if its 0, then its totally on the left-side, i cant set 0.1 or something and if margin is >1 than its too far ofcourse -_- how can i place the menu on the right spot (as shown in the second link)? (it is also supposed to be a bit lower) tats the main problem. if u want u can also comment (suggest) the new layout. i have a hard time choosing which one is better. i am still planning to make changes though. |
|||||||