|
CSS - Css Positioning Error In Ie7
My pages work fine in most browsers, but the positioning of the menu bar is wrong in IE7 browsers. I only discovered by chance when someone told me.
The menu bar is offset too the right and upwards, part covering the logo. http://www.firstpokertips.co.uk/ I have looked and looked but cant find why this would be. In other browsers it is fine. Thanks for any advice. Similar TutorialsHey all, I'm having a minor problem with an anchor (a.return, at the bottom of the page) on the following page: calvarychapeljax.com/fellowship.php In FF, Chrome, and IE8, it is displaying "properly" (a relative term, for sure ) on one line. In IE7 (and possibly prior IE versions; I don't have IE6 to test), the anchor is stacking vertically. I can't figure out if there's a wrapping issue, if there is less space in the way IE7 is interpreting the CSS, etc. What makes it worse is I have this anchor on other pages (webelieve, musicministry) and it is fine, even in IE7. Is the table affecting it? Any ideas? Hey folks, here's an odd problem that's got me totally stumped. I've got a nine item unordered list, each of which is a link that contains both text and a background image. The background image is a large spritebox. I'm using background-position to shift the spritebox to display the sprite specific to the a:link and also to display a separate a:hover version. Looks great in Safari and CSSEdit, but in Firefox four of the links are misplaced and the sprite is incorrect. The hover state is correct, however. This is hard to explain, but the example should help illustrate the problem. My thought was that it was related the psuedo class of a:link, but nothing I've tried seems to help. Any thoughts? The example file contains both the HTML and the CSS (just to simplify this problem for this forum). The full background image and the file containing the sprites is at my website, artmeetsearth dot org slash 2011 slash codetest dot html. To get the image type socialmediaicons.jpg instead of codetest. Thanks for any help you can offer! I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ 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 of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo I am getting a CSS validation error It is: 251 * Parse Error / textarea { border: 1px solid silver; width: 80%; } If I comment the CSS in question out, it gives me another CSS error a little bit farther down in the stylesheet... not sure why it is doing that or how to just fix this validation error, as the ones that come up after it are similar. My end goal is to make the page look normal in FF2. Currently in FF2 some of the text in the purple "Sesame Street" box is blocked out. I didn't create this page, but have been asked to figure out why it looks like this in FF2. I am no CSS expert, but would love to hear from one! Thanks for your help. I'm starting to create a new site, and I'm having some issues deciding how to create it. I want a header, footer, and 3 columns. This is the CSS I have created, but have some issues with it. Should I use absolute positioning for all elements? The bottom bar isn't lining up at all. Also, for the middle content, how do I get my info into there easily? I will be using the main page as a php page that I will include on all my pages. Should I not use a middle content section? #content { margin-left: 199px; margin-right: 199px; border-top: 1px solid Black; border-bottom: 1px solid black; height:450px; position:absolute; top:59px; width:585px; } #titleBar { background-color: #333399; text-align: center; font: bold large Courier New; height: 40px; padding: 8px; border-top: 1px solid Black; border-left: 1px solid Black; border-right: 1px solid Black; color:#FF9933; } #bottomBar { background-color: #333399; text-align: center; font: normal x-small Courier New; height: 20px; padding: 4px; border-bottom: 1px solid Black; border-left: 1px solid Black; border-right: 1px solid Black; color: #FF9933; } #navleft { background-color: #FF9933; border: medium double; text-align: center; height: 450px; position: absolute; left:10px; top:59px; width:200px; border:1px solid #000; } #navright { background-color: #FF9933; border: medium double; text-align: center; width:200px; height:450px; position: absolute; right:10px; top:59px; width:200px; border:1px solid #000; } If you view the following site in Firefox http://mtm324php.info/nasdaq.xml you can see this... NASDAQ 100 Current quotes then the date because this is the order of the data in the XML document... Well let's suppose I want it like this... http://mtm324php.info/nasdaq.bmp with the date on the very top. How would I do this in CSS? It has to be in CSS as that is the requirement. Thank you. Hi all, Im doing a bit of work, for which the URL can be found at: (URL address blocked: See forum rules)~gj311/webeng and the css is at (URL address blocked: See forum rules)~gj311/webeng/webeng.css Ignore the lack of content for now if you would (URL address blocked: See forum rules)=newthread&f=116# Smilie I am trying to make the "top" div appear at the top of the page with no gap, currently this works in IE but in firefox 2 and opera there is a gap showing the lighter bluey/grey background colour, is this because I am using width 100%? It is probably a very newbish question but any help would be appreciated. Cheers Hello, I am a complete newb to CSS and I am trying to position on image on my page, what is the correct syntax (the html, and CSS) for me to be able to place an image where ever i want on the screen? Thanks so much for the help Hi all.. I just stumbled onto this site via a google search. I'm having a problem with some "div" work and postitioning of a graphic. I'm working on a site and have decided to do all the positioning via CSS. The positioning shows fine in Firefox but the last portion is shifted down 10 or so pixels in Internet Explorer. Here's a quick show of the error: URL Here's the HTML with CSS below: Code: <div id="Table_01"> <div id="hdr-main_"> <img id="hdr_main" src="images/hdr_main.jpg" width="557" height="161" alt="" /> </div> <div id="hdr-mnu-left_"> <img id="hdr_mnu_left" src="images/hdr_mnu_left.jpg" width="5" height="20" alt="" /> </div> <div id="hdr-mnu-bg_"> <img id="hdr_mnu_bg" src="images/hdr_mnu_bg.jpg" width="547" height="20" alt="" /> </div> <div id="hdr-mnu-right_"> <img id="hdr_mnu_right" src="images/hdr_mnu_right.jpg" width="5" height="20" alt="" /> </div> <div id="hdr-mnu-bottom_"> <img id="hdr_mnu_bottom" src="images/hdr_mnu_bottom.jpg" width="557" height="5" alt="" /> </div> </div> </body> </html> I've also pasted the CSS code: Code: #Table_01 {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:768px;
}
#hdr-main_ {
position:absolute;
left:228px;
top:41px;
width:557px;
height:161px;
}
#hdr-mnu-left_ {
position:absolute;
left:228px;
top:202px;
width:5px;
height:20px;
}
#hdr-mnu-bg_ {
position:absolute;
left:233px;
top:202px;
width:547px;
height:20px;
}
#hdr-mnu-right_ {
position:absolute;
left:780px;
top:202px;
width:5px;
height:20px;
}
#hdr-mnu-bottom_ {
position:absolute;
left:228px;
top:222px;
width:557px;
height:5px;
}
Does anyone know why my graphic is turning out the way it is in IE and not in Firefox? This is my first serious attempt at positioning with CSS.. so bear with me Thanks all... Jason Hello, I have a flash movie that keeps moving out of place when the browser size is altered. How can I make it so the movie stays in one spot no matter what the browser size? remove this topic plss. thanks Can somebody help me. I have been dealing with IE6 bugs for awhile, and I know that IE6 has trouble with floating divs. I have listed the code below. It would be easier to look at the page on the website because it is very simple, but I am not allowed to post a URL Why does IE6 push the "main" div (yellow) down below everything. If I make the width 874px it takes its normal place just under the red "top" div, but it does not stretch all the way to the edge of the blue "container" div. It looks perfect in IE7, Firefox. Can anybody tell me why? Thanks so much in advance, Mike Code:
<style type="text/css">
body {background-color: #CCCCCC;}
#container {width:980px;height:1000px;margin:0px auto 0px auto;background-color:#0000FF;padding:0;}
#top {height:81px;width:980px;background-color:#FF0000;padding: 0px;}
#leftColumn {float:left;background-color:#8781bd;height:5001px;width:103px;z-index: 20;border-bottom:1px solid #000;}
#main {margin:0;padding:0;float:left;height:500px;width: 877px;background-color:#FFFF00;}
</style>
</head>
<body>
<div id="container">
<div id = "top"></div>
<div id = "leftColumn">
</div> <!--end of #leftColumn-->
<div id="main">
</div>
</div>
Due to popular demand, I have decided to bite the bullet and make the switch from tables to css and divs in layout designs. Obviously, since I am unfamiliar with this practice, I have run into an issue. I am trying to add a link to the right side of my title div, which has a bottom border of 1px...I am not sure how to go about doing this without going down a line or the link not positioning itself to the right... Here is what I have so far: HTML Code: Code: <div class="title" align="left"> <div style="display: inline;"><b>News Updates:</b></div> <!-- The below link needs to align to the right side --> <div style="display: inline;" class="font" align="right"><a href="javascript:void(0);">Add News</a></div> </div> CSS Code: Code: .font { font-size: 0.7em; }
.title {
font-size: 1.6em;
color: #0033FF;
border-bottom: 1px solid #0033FF;
}
I have no idea how to go about this and it seems like it would be so simple. Any help is appreciated. Hello friends, Need some help with CSS layer positioning, which for the last couple of days has been the cause of much frustration. I am updating my site, and am converting some of my code to be more semantic. The test page, which looks 'right' is here. The semantic version, which now places the footer and sidebar within their own divs is here (I have removed the javascript and other text to keep things as simple as possible): The problems I am experiencing: The side bar, shaded blue for clarity is now 'outside the box', see the first link to see how it should be; There is a gap between the bottom of the extra div and the top of the footer div; The positioning of the sidebar is affecting the header/nav - try mousing over 'contact'; In short, I am trying to convert my existing layout to this, but can't seem to get there. Here is what I am striving for: Code: |------------------------------------ | Navigation | |------------------------------------ |Breadcrumbs <p> | ------------------------------------- | | | | Content | Sidebar | | | | ------------------------------------- | Optional Extra | ------------------------------------- | Footer | ------------------------------------- Any help much appreciated! I have a table with 680px in width & trying to fit my img into the table. I'v tested it both in 1024x768 & 1280x1024. But it just doesn work. When i position it to match my 1024x768, it'll look bad at 1280x1024.. here is my positioning code : img.one{ position:absolute; top:325px; left:550px; } why is that so... I am getting slightly different displays with using div sections on my layout. I am using relative positioning mostly with a webpage with a bar across the top, bar down left hand side . In the content area I have another 3 sections. In IE it looks fine but in FF there is spaces left at very top and between another section in main area. Basically if i use absolute positioning it works for both but not relative positioning of sections in FF. Is there an issue with relative positioning in ff? I can give my code but that is about 100 lines. I have inputted some css popup text on roll over for some social bookmarking buttons on a new blog skin. (pkevan.blogspot) The problem I am having is placing where they pop-up. I can't use an absolute position because who knows where a post will be along with multiple posts. Right now there floating underneath the icons at the left hand side. I want the text to appear to the right of the icons inline with them. I'm having trouble positioning them there though. Any help, or properties that might be useful will be greatly appreciated. Thanks in advance. Heres what I have applied so far. div#socialbookmarks a span {display: none; } div#socialbookmarks a:hover span {display: block; float: left; position: inline; top: 0px; left: 0px; width: 20px; padding: 0px; margin: 0px; z-index: 0; color: #4AAAFA; background: transparent; } I've created a site with a static background.gif "body" element, then a container (div) where I'm putting my stuff. I want the container to roll up and down against the nice static background in the body margins.(there is an example of what I'm trying to do at CSS garden http://www.csszengarden.com - check out Gothica #027)The problem is that when I use absolute positioning for the elements - the container ignores the content and doesn't size properly. But when I use relative positioning, I can make everything work out OK - except it generates tons of extra space that gets dumped at the bottom of the pages. So my question is - does anyone know how to get rid of the space? BTIA ok http://www.drowninginmytears.org/invalid/ it works in internet explorer, however in firefox, it is i believe 3px off (the main header and navigation), can anyone figure out why? i've been stumped now for hours. thanks my css is: http://www.drowninginmytears.org/invalid/css.css Hello, I've got a div tag that I want to position tags off of using css's margin attribute. The data amount is variable, so sometimes the tags that position off of the first tag end up in different locations depending on the amount of data placed in the div tag. I've tried setting a static height attribute, but it doesn't appear to work for me. Any ideas? |
|||||||