CSS - Css Position Error On I.e?
I've been fixing errors for all of today trying to get my website to work in FF and I.E. It was all working fine until I refreshed I.E after implementing a myspace embedded link.
If you're a I.E users you can see it by visiting (okay, I was going to post a link to my website so you could see, but It seems the forum rules prevents me from doing so ) Heres an image. Code: http://i4.photobucket.com/albums/y102/Macceth/error.jpg EDIT: For some reason the image isn't showing up either... but I can see it when I click preview... is posting images going againsted the rules aswell for first time posters? :S and here are the html code and styles.css code. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="keywords" content="Metal, Heavy Metal, Rock, Southern Rock, Music, Songs, Band, Want, For, Destruction, Want For Destruction, Destruction, UK" /> <title>Want For Destruction | The Official Want For Destruction Site</title> <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"> <link href="styles.css" rel="stylesheet"> </head> <body> <div id="container"> <div id="header"> <h1>Your Logo</h1> </div><!--ender header--> <div id="nav1"class="cms-editable"> <ul id="nav"> <li><a href="index.htm">Home</a></li> <li><a href="band.htm">Band</a></li> <li><a href="events.htm">Events</a></li> <li><a href="music.htm">Music</a></li> <li><a href="photos.htm">Photos</a></li> <li><a href="contact.htm">Contact</a></li> <li><a href="#">Shop</a></li> </ul> </div> <div id="main"> <div id="primary"> <div id="header2" class="cms-editable"> <h2>EVENTS!</h2> </div> <div id="content1" class="cms-editable"> <p><strong>Upcoming 2011 events!</strong></p> <p>January 21st - The Flying Dutchman - Friday at 21:00<br />February 21st - Seabreeze - Saturday at 21:30</p> </div> </div><!--end primary--> </div><!--end main--> </div><!--end container--> </body> </html> Code: html { background: #000000 url(images/BG.jpg) no-repeat center top; } body { text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 100%; } a { text-decoration: none; */ color: white */ } a:hover { text-decoration: underline; } a.selected { font-weight: bold; } p { color: #43433f; line-height: 21px; } h2 { color: #363era; font-size: 31px; } li { list-style: none; } img { border: 0px; } #container { position: relative; margin: auto; width: 971px; text-align: left; } #header { position: relative; } #header h1 { text-indent: -9999px; background: url(images/header.png) no-repeat center; line-height: 251px; } #nav { background: url(images/navBG.png) repeat-x; overflow: hidden; height: 40px margin: 0 0 6px 0; padding: 0 0 0 31px; } #nav li { float: left; line-height: 40px } #nav li a { border-right: 1px dotted #959595; padding: 0 1em; color: white; } #nav li a.first { padding-left: 0; } #main { position: relative; background: url(images/mainBG.png) repeat-y; padding-bottom: 4em; } #primary h2 { padding: 25px 0 15px 0; margin-left: 38px; margin-right: 38px; border-bottom: 2px dotted #aab391; color: white; } #primary p { padding-left: 38px; padding-right: 38px; color: white; font-size: 75%; } #content1 p { border: 0px; } #padfix { padding-left: 38px; padding-right: 38px; padding-top:0px; padding-bottom:5em; float:left; } Sorry for being a nuisance I am kinda new to all of this stuff. Any help would be greatly appreciated! Similar TutorialsI have a vertical menu on the left-hand side of my website, everything appears correctly when the page is first loaded but when I click on a menu item the entire div appears to shift to the left (10px). If I refresh the page it also appears correctly, so it is only when I have clicked on a menu item. I do know that there are plenty of problems with IE, but the menu does appear and function correctly in both IE and Opera. I am only having the problem with Mozilla. I am thinking that it may be something to do with the link visited properties but am not sure what. I have validated the css via the W3C website but there were no errors reported. The css segment is as follows: #subnavcontainer { position: absolute; left: 10px; top: 0px; margin-top:0px; padding-top: 0px; height: 700px; width: 160px; background: url("../images/bg_vert.gif") no-repeat; } #subnavcontainer ul { list-style-type: none; color: #000; margin-top: 0px; margin-left: 0px; padding-left: 0px; padding-top: 0px; font-family: Arial, Helvetica, sans-serif; display: block; width: 200px; background-color: #D7D7D7; } #subnavcontainer li { padding-left: 0px; margin-top: 1px; } #subnavcontainer ul li { margin: 0 0 1px 0; padding-left: 0px; } #subnavcontainer ul a { display: block; padding: 0px 2px 2px 5px; width: 160px; color: #000; background-color: #F0EFEE; text-decoration: none; border-left: 4px solid #B09292; } #subnavcontainer ul a:hover { color: #000; background-color: #fff; text-decoration: none; border-left: 4px solid #FF0000; } The html segment is as follows: <div id="subnavcontainer"> <ul> <li> <a href="../content/company/se_company_overview.htm" target="mainFrame">Overview</a> </li> <li> <a href="../content/company/se_company_location.htm" target="mainFrame">Location</a> </li> <li> <a href="../content/company/se_company_contact.htm" target="mainFrame">Contact</a> </li> </ul> </div> I have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content { position:relative; width:320px; margin-left: 125px; margin-top: 20px; border:1px solid black; background-color:white; padding:10px; z-index:3; } #right { position:absolute; width:200px; top:20px; left:500px; border:1px solid black; background-color:white; padding:10px; z-index:1; } Hello, I am having trouble understanding the positioning within CSS. I.E. the relative/absolute positions. I am creating a site with 1 banner and 2 columns underneath, all centered. The 2nd column I want to be right beside the left coumn. so it simply goes like So depending on where left is on the page, the main is always literally right beside it. Anyone have any suggested reads on this? How to make div stick to top of a page and align center Hei ppl. i am begenning of designing in css but i have a problem.. i have my website www.zyxep.net/byensguf/ i have that div in the bottom under the text "footer" that <div> do i need to get over the header image to the right.. so the right side of the login field is flush with the right side of the border.. and i need it to stay on that position in every size of the users screen.. min. 800x600 max. anything.. here is my css code: Code: body { text-align: center; /* center things in pre-IE6 */ margin: 0px auto; } #container { margin: 0px auto; left:150px; top:0px; width:760px; height:420px; z-index:1; border-left: 1px solid black; border-right: 1px solid black; } #header { margin: 0px auto; left:0px; top:0px; width:760px; height:200px; z-index:2; background-image: url(images/logo.jpg); border-bottom: 1px solid black; } #menu { margin: 0px auto; left:0px; top:200px; width:760px; height:20px; z-index:3; border-bottom: 1px solid black; } #content { margin: 0px auto; left:0px; top:220px; width:760px; height:180px; z-index:4; border-bottom: 1px solid black; } #footer { margin: 0px auto; left:0px; top:400px; width:760px; height:20px; z-index:5; } #login { margin: 0px auto; left:760px; top:15px; width:400px; height:50px; z-index:6; } #username { width: 100px; background-color: transparent; border: 1px solid black; } #password { width: 100px; background-color: transparent; border: 1px solid black; } #loginsubmit { width: 100px; background-color: transparent; border: 1px solid black; } and my index.php Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>ByensGuf.dk - Byens bedste guf</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT="zyxep"> <META NAME="Keywords" CONTENT="zyxep, zyxep.net, portfolio"> <META NAME="Description" CONTENT="zyxep.net - portfolio"> <meta name="REVISIT-AFTER" content="1 DAYS"> <LINK REL="stylesheet" HREF="style.css" TYPE="text/css"> </head> <body> <div id="container"> <div id="header"></div> <div id="menu">menu</div> <div id="content">content</div> <div id="footer">Footer</div> <div id="login"> <form action="login.php" method="post"> <div> <input type="text" name="username" id="username"> <input type="password" name="password" id="password"> <input type="submit" value="login" id="loginsubmit"> </div> </form></div> </div> </body> </html> plz help me.. i am so confused I have a couple of nav lists that I'm trying to position. For the first part, in FF the top list (home|site map|help) is not positioning at the top of my div. I want it aligned at the top with no margin or padding so it's flush. I have included a link which shows an image of how I want it to look. The site is APOD The way I want it to look is HERE The CSS is : Code: #hright { width: 240px; height: 66px; float: right; text-align: right; padding-top: 0; } #hright ul { list-style: none; } #hright ul li { display: inline; } HTML Code: <div id="hright"><ul><li><img src="images/apod_new_04.gif" alt="home" title="home"/></li><li><img src="images/apod_new_05.gif" alt="site map" title="site map"/></li><li><img src="images/apod_new_06.gif" alt="help" title="help"/></li></ul> </div> The second issue arises in IE. I have another horizontal list, that I want to appear on the same line. In FF it's behaving properly, but in IE it's not. The CSS is: Code: #hnav { width: 740px; height: 29px; clear: both; background-color: #FFFFFF; padding: 0; text-align: left; } #hnav ul { list-style: none; padding: 0; text-align: left; } #hnav ul li { display: inline; padding: 0; text-align: left; } The HTML is: Code: <div id="hnav"><ul><li><img src="images/apod_new_08.gif" alt="About Us" title="About Us"/></li><li><img src="images/apod_new_09.gif" alt="News" title="News"/></li><li><img src="images/apod_new_10.gif" alt="High School" title="High School"/></li><li><img src="images/apod_new_11.gif" alt="College" title="College"/></li><li><img src="images/apod_new_12.gif" alt="Contact Us" title="Contact Us"/></li></ul></div> There's probably a better way to do this than I'm trying and I'm open to any suggestions. I'm attempting to get a background image to stay in the position I've defined in the 'bannerAd" css. The problem I'm having is that when I change the position (margins or padding) of the objects in the css class code for the bannerAd-top-right, the background image in the bannerAd div is effected. How can I move the content in the bannerAd-top-right css without the content in the bannerAd div getting affected? Below is the code for the index.php showing the class definitions: Code: <div id="bannerAd"> <div class="bannerAd-top-left"> <jdoc:include type="modules" name="user5" style="bannerAd-top-left" /> </div> <div class="bannerAd-top-right"> <jdoc:include type="modules" name="rightBanner" style="bannerAd-top-right" /> </div> </div> Below is my css for the above: Code: #bannerAd { background:url(../images/banner-right.jpg) no-repeat right 0; margin-bottom: 10px; width: 100%; } .bannerAd-top-left { margin-bottom: 10px; height: 230px; width: 400px; float:left; } .bannerAd-top-right { height: 60px; width: 400px; padding:178px 0px 0px 445px; } I need the .bannerAd-top-right which contains my banner to be moved in position independently from the background image found in the bannerAd css. I just need to move the position of the .bannerAd-top-right up about 10px but every time I do that it shrinks the background image. Any help would be greatly appreciated. thanks. hello, I'm trying to build a website, I'm new to the CSS design, an html version of the site is here (it will later be converted to a joomla template) i managed to fix the position for firefox, almost but not for IE.. can you tell me what i have wrong and how to fix it? the CSS is here thank you IE browser seems fine but mozilla display a simple table with links inside in a squished up format, not present on the web design. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <meta name="GENERATOR" content="PageBreeze Free HTML Editor (http://www.pagebreeze.com)"> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" > <title>mybar.html</title> </head> <style type="text/css"> #elButton a { color: #000000; font-size:10px; font-family:verdana; font-weight:bold; text-decoration: none; /*border:1px outset aqua;*/ /* background-color:#00ffff;*/ border-right-style:solid; border-right-width:1px; width: 110px; /* padding: 3px 5px;*/ /*margin: 1px;*/ } </style> <body bgcolor="#ffffff"> <p> <table style="WIDTH: 487px; HEIGHT: 26px" cellspacing="0" cellpadding="0" width="487" align="right" bgcolor="#00eaea" border="0"> <tr> <td valign="top" align="middle"> <div id="elButton"> <a href="#">Java Script</a> <a href="#">Dynamic HTML</a> <a href="#">Server Side</a> <a href="#">Client Side</a> </div></td></tr></table></p> </body> </html> My site is RegionalCreations.com if you want to see the issue for yourself. I actually haven't encountered this issue before with the countless sites I've made. I used the basic layout of an already made wordpress theme and redesigned it for my site, I didn't change the menu position however, so I think the issue is with the original theme. Here is an image showing the problem: Well apparently I can't post an image so go to my site and then add /images/IE-CSS-bug.jpg on to see it, thanks. As you can see my image across the top is off center in IE even though it looks fine in Firefox. My menu is also spaced down in IE when it shouldn't be. Here are the locations of my stylesheets, the second 1 loads after the main 1 if you view the page in IE. (I can't post the url so go to my site and add the rest of the url on.) Stylesheet: /main/wp-content/themes/cleanmachine/style.css IE additional style: /main/wp-content/themes/cleanmachine/ie-win.css If anyone can look at my stylesheets and tell me the problem that would be great. Thanks. ok my site works perfect in ffox but when i load it in ie the fixed position dose not work :'( why not?, if i go back in firefox it will ok, so this is driving me insane right now. I have a page, all divs, all positions absolute. Everything is working perfectly except two divs, which should line up 157px from the top, do so only in firefox, safari and netscape, and for some reason they are 8 pixels off in IE. If I change the position to 149px, then it lines up perfectly in IE, but 8 pixels too high (and then of course behind other stuff in firefox, etc.). Here is the SITE, and here is the CSS If someone could please help me out here, I would be overwhelmingly grateful. Thanks in advance for any help anyone can offer. Hi, I'm following a tutorial and I would like to understand the position functioning. I have a box container and some elements in. In the css, the are all set relative position. I don't understand why the second element (AMPT) has its contain offset and third one (Writing) is not. I understand that the first element has like a reference the container box. I would sincerely glad if you can help me to understand the relative positioning. Thanks in advance. PS: I'm using firefox and here is the code: artefact89.free.fr/relative.html (without www) Hey I got a table which displays the profile (data/info) of a user. The first column says: first name, last name, email, etc. the second column shows the actual data: stefan, blabla, blabla@hotm... etc. Then i have a third column where the 8 cells are rowspanned into one big cell. In this celll i want to show a picture that can be max: 250x250 pixels. The image might be smaller but not bigger. My problem is that some users have smaller pictures and some users have the maximum allowed dimensions. So if you browse through all the profiles by clicking the next button, the other elements on the page shift lower or higher depending on the size of the uploaded image. What i wanted to do is make a basic picture of 250x250 and put that in the cell for every member. And then display the real picture above the standard pic. I just dont know how to let the images overlap with eachother. Or is there a better way for this? I probably shouldnt use a table for this at all. But how do i make a table with the tabular data. And put the image next to the table? It automatically shifts to the next line for me... hope you can give me some tips. (my eventual goal is to make every user profile look exactly the same with the only difference being the data of the member-profile.) thanks in advance. Hi Everyone, I have a little problem with some CSS I think, I have a layout that works apart from the menu, see (URL address blocked: See forum rules) I know that it is asp but it only renders the html as is at the moment but I'll be doing asp after this problem is sorted.. the menus start fading down but if there is a second menu it places it under the header of the menu before and it does not move out of the way... I am quite new to CSS and all this CSS gets me confused and now I'm lost... please could anyone help.. there is 3 CSS documents to play with.. but in the last few days they got a bit disorganized.. I get like that when I feel my egg cracking the site again: (URL address blocked: See forum rules) In IE7 on this page http://hometown.tmhdesign.com the background image position for my #main div is being ignored Code: #main { width: 990px; margin: 0 auto; min-height: 300px; background: red url(images/style1/main1_div_bg.gif) 0 427px !important; text-align: left; } The question is "What is the positioning context of a div positioned absolutely (e.g., div#nav{position:absolute;}); that is, where is the 0,0 coordinate from which any offsets will be measured?" Is the answer "it will be measured from the top left"? I want to position my website logo to top left corner (0,0) and I dont want it push my container div down. I cant place logo tag within container tag because the logo overflows to left. if you couldnt picture it in your mind, please check the attached image thank you in advance. http://www.refinethetaste.com/html/ Alright here goes. I just redesigned my website. To see how it *SHOULD* display, use Mozilla, Safari, etc... Use Internet Explorer on Windows to see how it displays incorrectly. The first way that I wanted to do it was to have everything either float: left; or float: right; and then use relative positioning on the left menu to bump it left. The problem with this is that Internet Explorer didn't want to do that and since I'm designing with every internet user in mind, I must make everything viewable for eve I assume that the problem lies with the stylesheet in these two sections... Code: #menu { position: absolute; top: 115px; left: 145px; width: 50px; padding-right: 0px; padding-top: 0px; text-align: left; font-family: LucidaGrande, Lucida, Helvetica, Arial, sans-serif; margin-top: 0px; voice-family: "\"}\""; voice-family: inherit; z-index: 200; } a.tab, a.tab:link { background-color: #222222; border: 1px solid #EFEFEF; padding: 12px 0em 12px 10px; font-size: 14px; color: #FFFFFF; font-weight: bold; float: left; width: 95px; margin: 5px 0px 5px 0px; text-decoration: none; } a.tab:visited { color: #FFFFFF; } a.tab:hover { background-color: #666666; color: #FFFFFF; } a.tab:active { color: #FFFFFF; } a.tab.activeTab, a.activeTab:link { border-right-width: 0px; width: 100px; background-color: #000000; } and Code: .rightContent { float: right; width: 535px; background-color: #000000; border: 1px solid #EFEFEF; margin-left: 0px; margin-bottom: 10px; margin-left: 0px; margin-right: 5px; text-align: center; color: #FFFFFF; } The (X)HTML for this section looks like this... Code: <div id="menu"> <a class="tab activeTab" href="http://www.paularms.com">Home</a><br /> <a class="tab" href="http://www.paularms.com/archives.html">Archives</a><br /> <a class="tab" href="http://www.paularms.com/about/downloads.html">Downloads</a><br /> <a class="tab" href="http://www.paularms.com/about/tutorials.html">Tutorials</a><br /> <a class="tab" href="http://www.paularms.com/about/index.html">About</a><br /> </div> <div id="content"> <div class="rightContent"> .......... Does anyone know WHY Internet Explorer is displaying this wrong? Even more helpful would be HOW to fix the problem. Thanks everyone. |