|
CSS - Why They Sit In Different Position In Ie And Firefox Browser
Hi:
I'd like to ask you why my image sit in different position from IE and Firefox browser. my code as following; PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <style type="text/css"> #image{ position: absolute; right: 18px; top: -10px; padding:0; border: 2px dashed red; } #img1{ position: relative; padding: 0; border: 2px dashed #32ed19; margin:auto; } </style> </head> <body> <div id="image"> <img id="img1" src="firstcar.JPG" alt="myfirstcar"> </div> </body> </html> Similar TutorialsEven though the text in the div is positioned where I want it to be in DW, it doesn't display correctly in the browser. Here's my screenshot: img367.imageshack.us/img367/8152/picture2on5.th.png add http:// to the front Here's my CSS: @charset "UTF-8"; /* CSS Document for index.html*/ body{ background-color: white; } #index_bg{ background-image: url('index.gif'); background-position: top center; background-repeat: no-repeat; width: 473px; height: 153px; margin: 0 auto; overflow: hidden; } #index_text_welcome{ margin-top: 15px; margin-left: 15px; width: 180px; height: 30px; color: #999; font: x-small Verdana, Arial, Helvetica, sans-serif; } #index_text_enter{ margin-top: 10px; margin-left: 180px; width: 110px; color: #666; font: small Verdana, Arial, Helvetica, sans-serif; line-height: 20px; } #index_text_download{ margin-top: 30px; margin-left: 15px; width: 75px; color: #CCC; font: x-small Verdana, Arial, Helvetica, sans-serif; } #index_footer{ background-image: url('index_footer.gif'); background-position: top center; background-repeat: no-repeat; width: 700px; height: 50px; margin-top: 200px; clear: both; float: none; margin-right: auto; margin-bottom: auto; margin-left: auto; z-index: auto; } #index_footer_text{ margin: auto; margin-top: 12px; margin-left: 250px; width: 250px; color: #CCC; font: x-small Verdana, Arial, Helvetica, sans-serif; text-align: left; vertical-align: baseline; } a{ text-decoration: none; color:#666 } a:hover{ color: #333; } p.s i'm in a hurry n i'll edit this post later..i just want to see replies first I'm trying to have the contact information for a site to always appear in a right div next to the main content div. I would like it to always appear in the top right of the div, no matter how much the user scrolls down. This way, the information is always visible. I tried experimenting with background images in certain divs, but Firefox (but not IE) was having trouble displaying it the way I wanted. I've seen it in action before, so I'll post a URL if i can find where. 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. 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 Could somone please tell me what is the issue with the navigation on the left hand side on this page. It looks ok in IE but in Firefox it is sticking out into the main page area? http://www.santarosadentist.com/santa-rosa-dentist.asp Thanks. Hi, I have to get background position of image from a css class in a javascript function. [CODE] abc.button { width: 47px; background-image: url(../bt/save.gif); background-position: 0 -123px; } [CODE] I am able to get it in IE using backgroundPositionX and backgroundPositionY [CODE} var x = document.getElementById('abc').currentStyle.backgroundPositionX; var y = document.getElementById('abc').currentStyle.backgroundPositionY; [CODE} But I am not able to get the background position in FireFox. Is there a way to get background position of image in Firefox. Thanks Im creating a website for somebody and using CSS for positioning. Ive created a main content container which is a DIV and have several child DIVS which are the content themselves. The problem I am positioning the divs using relevant positioning but in firefox the webpage is still leaving lots of space underneath the positioned divs like they are stacked on top of each other. Safari isnt giving me this problem and I havent even looked at it in IE so i dont know yet. But could somebody please tell me how I can get firefox to get rid of all the space underneath because my DIVS are not stacked. http://christopher-ball.com/Craig/ visit that in firefox and you will see what I mean, theres a big chunk of red UNDER the footer that shouldnt be there. If i take out the awards and sponsors DIVS then the block disappears. The CSS background-position: right; is not working in Firefox/Netscape, and just aligns the background image to the left. Know why? Hi, I have been beating my head against the wall here. My video position in firefox shows up over top of my other nested divs/classes. www.binaryshopper.com The site renders perfect in IE. When you spend more time on CSS than programming, something is wrong! I love CSS but it still doesn't do what it was intended to do. After years of CSS, you still have better control over layout using crappy tables!! Can someone please help me here before I start shooting Firefox developers? I am having a css issue with IE 6 showing a gap in mambo template however this does not appear in Firefox and the site looks perfect viewing in Firefox.. Over at http://www.stlaware.com and look at the weather box on the left side of the site if your using IE you will see a white gap I would say maybe 200ish pixel width on the right side of the weather box which I don't want any spaces or padding around the box but padding: 0px or margin: 0px doesn't seem to fix it. If you have both browser compare it in IE and Firefox and you'll see what I mean .. also on the right of the site is a random image and it also have the gap on each side of the image which is not seen in Firefox either Any way to correct this gap and make it disappear in IE? I am sorta a newbie in css but I am fast learner Here the part of index.php html table where the weather resides in .. Quote: <tr> <td width="112" height="34"><img src="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_43.png" width="118" height="34" hspace="0" vspace="0" border="0"></td> <td width="100%" background="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_27.png"> </td> <td width="10" align="right"><img src="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_30.png" width="7" height="34"></td> </tr> <tr align="left"> <td height="15" colspan="3" class="mainWindow"><?php mosLoadModules ( 'left' ); ?></td> </tr> and the right side table where random image reside in Quote: <tr> <td width="112" height="34"><img src="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_43.png" width="118" height="34" hspace="0" vspace="0" border="0"></td> <td width="100%" background="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_27.png"></td> <td width="10" align="right"><img src="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_30.png" width="7" height="34"></td> </tr> <tr align="left" valign="top"> <td height="15" colspan="3" class="mainWindow"><?php mosLoadModules ( 'right' ); ?></td> </tr> And partial of my css sheet Quote: /* Body */ BODY { margin: 0px 0px 0px 0px; background-color : #FFFFFF ; color : #465675; scrollbar-3dlight-color: #FFFFFF; scrollbar-base-color: #CCE1E3; scrollbar-darkshadow-color: #356C82; scrollbar-face-color: #CCE1E3; scrollbar-highlight-color: #CCE1E3; scrollbar-shadow-color: #CCE1E3; scrollbar-track-color: #CACEDB; scrollbar-arrow-color: #CCE1E3; padding: 0px; text-align: center; } .headertable { border-bottom: 1px solid #003366; } td.mainWindow { border-bottom: 1px solid #666666; border-right: 1px solid #666666; border-left: 1px solid #666666; } } td,tr,p,div { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #333333; } Any suggestion tips help assistance with this will be greatly apprecated .. the 'left' loadmodule where the weather is loaded into and the 'right' loadmodule is where the random image is loaded into Thank you Bill Hi All. I am getting an extra space in FireFox. The space is fixed when I disable the 'Browser Default Styles' in FireFox. IE7 shows it OK. http://holzgreen.com/gap/ any comment is appreciated. sukruB Hello all, My website appears fine on Firefox 3.6.7 but not on IE 8 (it is missing the borders on the article text area and the login box is up too high). I notice you can't include URLs in the post for new members so any help is greatly appreciated. Thanks! 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;
}
My first post.... ok... First I would like to say THANK YOU to anyone who has time to bestow some knowledge to me on what I am sure is a highly noob-esqe situation. I would also like to say that I have thoroughly search this and other forums for my issue, unfortunately I dont think I understand CSS or any web design enough to comprehend the solutions given. I think this may require someone with the knowledge I lack to come down to my level... if you can bend that low.. and walk me thru layman term-style. Again thanks in advance for anytime spent helping out. That being said I was recently trying to jazz up my website that is hosted by a certain music community. I do a decent amount of business thru this site so I wanted to step up the interface a little and get away from using the standard page setup they give you. They do offer the option to edit CSS to construct your own for a little more customization. I jumped in, and after a few days of struggling, I got it looking how I wanted it. I was excited until I realized it looked different on almost every computer i visited the site on. My Background is fine, but the links to paypal and other content is all over the place(e.g. song player, twitter link, buttons) I have tweaked and tweaked, but have not been able to remedy this apparently common problem due to my lack of knowledge and experience. My only hope is to post the coding here and have a Smart Guy/Girl guide me in the right direction. I hope Im not asking too much guys... here goes (I know I can post my url here, how can I redirect you guys to veiw my site??) /********* SoundClick CSS Template (based on custom version Mon, Sep 28 2009) ***********/ Quote: /* general */ body {background: url((MyBGJPEGforbackground)); margin:0px;} body,div,tr,td,select,textarea,input,option {font-family:Verdana; font-size:11px;} a, a:link, a:visited {color:white; text-decoration:none;} a:hover {color:#ff0000; text-decoration:underline;} .pageFooter {clear:both; color:gray; padding:1px 0px 50px 20px;} .infoBox {width:650px; margin:50px auto; background:white; color:black; border:silver solid 1px; padding:30px; font-size:14px;} /* hardly used, its for error messages to user */ .infoBox .quotes {margin:20px; border:#4b4b4b dashed 1px; font-style:italic; padding:10px; background:;} /* main containers */ .mainTable {background: url((MainTableBGPicWentHere)) ; color:#999999; width:750px; margin-left:auto; margin-right:auto; text-align:center;} .mainContent {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:#999999; width:725px; float:left; overflow:hidden; margin:0px 0px 20px 5px;} /* IE6 doesnt support our preferred overflow:visible */ /* left navigation */ .navigation {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:white; width:300px; float:left; overflow:hidden; margin:10px 0px 20px 0px;} .navigation a:link, .navigation a:visited {color:#999999;} .navigation a:hover {color:#ffffff;} .navigationDivider {height:6px; line-height:6px; border-bottom:#232323 dashed 1px; margin-bottom:6px;} /* general elements */ .headline {background:transparent; color:transparent; font-weight:bold; border-bottom:transparent dashed 0px; border-top:transparent solid 0px; padding:330px 1px 50px 50px;} .headlineBig {font-size:22px; font-weight:normal;} .headlineSuppl {float:right; margin:0px 0px 0px 100px; color:#666666; font-size:11px; font-weight:normal;} /* for text/links on the right side of main headline (e.g. song count on main page) */ .headlineSuppl a:link, .headlineSuppl a:visited {color:#666666; text-decoration:none;} .headlineSuppl a:hover {color:black; text-decoration:underline;} .pageturner {background:; color:#cccccc; border:#4b4b4b solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} /* pages menu (previous, next..), e.g. on music page, message board */ .pageturner .nonactive {color:#666666;} .pageturner a:link, .pageturner a:visited {color:#cccccc; text-decoration:none;} .pageturner a:hover {color:#ff0000; text-decoration:underline;} .listedPicsBox {border:#4b4b4b solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;} .listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden} .breaker {height:1px; line-height:1px; clear:both} /* general color and font assets */ .color_supplemental {color:#666666;} /* used e.g. for song pages comments count */ .alternateBG0 {background:none;} /* used as background colors for comments */ .alternateBG1 {background:none;} /* alternate color */ /* main page (the default entry page) */ .mainContent .contHeadline {clear:left; font-size:16px; color:#cccccc; padding:1px 0px 2px 20px;} /* interview questions */ .mainContent .contText {clear:left; padding-left:15px;} .mainContent .contInterview {clear:left; padding-left:30px;} .mainContent .newsBox {clear:both; background:transparent; color:white; border:transparent solid 0px; margin:6px 20px 0px 20px; padding:100px;} /* main page: video box (different from video page) */ .videoBox_mainPage {padding:5px; margin:0px 100px 20px 100px;} .videoBox_mainPage .video {padding:5px; margin-bottom:10px;} .videoBox_mainPage .title {font-size:15px; text-align:center; margin-bottom:3px;} .videoBox_mainPage .shareLinks {float:right; padding:2px; border-bottom:#4b4b4b dashed 1px;} .videoBox_mainPage .labels {color:#666666; width:100px; padding-right:20px; text-align:right; float:left;} .videoBox_mainPage .info {padding-left:120px;} .videoBox_mainPage a:link, .videoBox_mainPage a:visited {font-size:13px; font-weight:normal; text-decoration:none;} .videoBox_mainPage a:hover {text-decoration:underline;} /* main page: upcoming shows */ .liveshowsBox {background:#cccccc; color:#000000; width:300px; margin:15px 2px 15px 10px; float:right; clear:right;} .liveshowsItems {padding:4px 0px 0px 0px; font-size:11px; clear:both;} .liveshowsBox a:link, .liveshowsBox a:visited {color:#000000; text-decoration:none;} .liveshowsBox a:hover {color:#666666; text-decoration:underline; cursorointer;} /* main page: standard song box on artist page (only this song box or the embedded player is used. Never both together) */ .playerBox {float:left; clear:left; padding-left:20px; margin:300px 0px 100px 0px;} .playerBox .playerHead {background:#000000; color:#cccccc; border-top:#4b4b4b solid 1px; border-bottom:#4b4b4b solid 1px; text-align:right; font-size:13px; padding:3px 5px 3px 3px;} .playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#666666; text-decoration:underline;} .playerBox .playerHead a:hover {color:#ffffff; text-decoration:underline;} .playerBox .songBox {background:#cccccc; border-bottom:#4b4b4b solid 1px; width:330px; padding:100px 0px 0px 1px; overflow:auto;} .playerBox .songBox .singleSong {color:#000000; font-size:13px; padding:1px;} .playerBox .songBox .singleSong:hover {background:#000000; color:#cccccc; cursorointer;} /* main page: VIP embedded player (only this embedded player or the standard song box is used. Never both together) */ .embeddedPlayer {margin:1px auto; width:750px;} /* main page: tabbed content headers (fans,stations) */ .tabbedCont_header li a:link, .tabbedCont_header li a:visited {background:#000000; color:#666666; text-decoration:none; margin:0px 20px 0px 0px; padding:3px 6px 3px 6px; border:#666666 solid 1px; border-bottom:none; } .tabbedCont_header li a:hover {color:white;} .tabbedCont_header li.selected a:link, .tabbedCont_header li.selected a:visited {background:#111111; color:#999999; border:#111111 solid 1px; border-top:#999999 solid 1px; font-weight:bold;} /* main page: fans, stations (tabbed content) */ .fansBox {padding:30px 20px 20px 20px; clear:both;} .fansBox a:link, .fansBox a:visited {} .fansBox a:hover {} .fancount {background:#111111; color:#666666; text-align:right; padding:3px 5px; margin-bottom:8px; font-size:11px; font-weight:normal; border-bottom:#232323 dashed 1px; border-top:#222222 solid 1px; } .fancount a:link, .fancount a:visited {color:#B8B8B8; text-decoration:none;} .fancount a:hover {color:#E6E6E6; text-decoration:none;} .fansBox_content {background:url(/images/siteNav/transbgblocks/black/bg_20.png) important; background:#111111;} .fansBoxLastLine {background:#111111; color:#666666; clear:both; text-align:right; padding:3px 5px; margin-top:8px; font-size:11px; font-weight:normal; border-bottom:#222222 solid 1px; border-top:#232323 dashed 1px;} .fansBoxLastLine a:link, .fansBoxLastLine a:visited {color:#B8B8B8; text-decoration:none;} .fansBoxLastLine a:hover {color:#E6E6E6; text-decoration:none;} .stationItem {clear:both; color:black; border-bottom:#4b4b4b dashed 1px; padding:0px 1px 0px 1px;} .stationPicBox {float:left;} .stationPics {width:70px; height:70px; background-position:center center; background-repeat: no-repeat; margin:0px 0px 1px 0px; overflow:hidden} .stationButtonsBox {float:left; padding:2px 15px 0px 5px; height:60px;} .stationsText {color:#999999; height:80px; overflow:hidden;} .stationlink a:link, .stationlink a:visited {color:#999999; font-size:16px; text-decoration:none;} .stationlink a:hover {color:#ff0000; text-decoration:underline;} /* music page */ .songsBox {border-bottom:#4b4b4b dashed 1px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;} .songsBox a:link, .songsBox a:visited {text-decoration:none;} .songsBox a:hover {text-decoration:underline;} a.songtitle:link, a.songtitle:visited {color:#999999; text-decoration:none; font-size:16px; font-weight:bold;} a.songtitle:hover {color:#ff0000; text-decoration:underline;} .songsBox .actionlinks {font-size:14px;} /* the links for full song info, add to station, rate this song... */ .songsBox .topSong {color:#666666; float:left; text-align:left; font-size:13px;} /* comments page */ .commentsWelcome {background:; color:#cccccc; margin:0px 20px 20px 20px; padding:20px; border:#4b4b4b solid 1px;} .commentsBox {border-bottom:#4b4b4b dashed 1px; padding-top:5px;} .commentsBox a:link, .commentsBox a:visited {text-decoration:none;} .commentsBox a:hover {text-decoration:underline;} .commentsBox .songComment {border-bottom:#4b4b4b dashed 1px; font-size:11px; padding:1px 3px; margin-bottom:5px;} .commentsBox .postdate {color:#666666; font-size:13px; font-weight:normal; text-align:right; margin:0px 5px 10px 0px;} .commentsBox .postdate a:link, .commentsBox .postdate a:visited {text-decoration:none;} /* for delete/edit links */ .commentsBox .postdate a:hover {text-decoration:underline;} .commentsBox .comment {font-size:14px; padding:0px 5px 0px 140px;} .commentsBox .bandSignature {border-top:#4b4b4b dashed 1px; color:#666666; width:310px; margin-top:15px; line-height:20px;} .commentsBox .ratingsBox {float:right; width:220px; border-left:#4b4b4b dashed 1px; margin-bottom:10px;} .ratingsBox .label {width:115px; text-align:right; float:left; padding-right:20px;} /* also used for .commentsPostBox .ratingsBox */ .commentsPostBox {padding:10px; margin:20px 0px; background:#FFCC99; color:#000000; border-top:black solid 2px; border-bottom:black solid 1px;} .commentsPostBox .ratingsBox {background:#ECECEC; color:#000000; clear:both; padding:7px 0px; margin:0px 250px 20px 30px;} /* video page */ .videoBox {background:black; color:#E0E0E0; padding:5px; line-height:22px;} .videoBox .video {padding:20px; margin-bottom:10px;} .videoBox .title {text-align:center; background:#121212; color:#F3F3F3; font-size:16px; padding:1px;} .videoBox .labels {color:#666666; width:200px; padding-right:20px; text-align:right; float:left;} .videoBox .info {float:left; width:440px;} .videoBox a:link, .videoBox a:visited {color:#0099CC; text-decoration:none; font-size:11px;} .videoBox a:hover {color:red; text-decoration:underline;} .videoListBox {border-top:#4b4b4b dashed 1px;} /* photo pages */ .photopage {background:black;} .selectedPhoto_box {text-align:center;} .selectedPhoto_box .selPhoto_title {background:#111111; color:#cccccc; border-bottom:#666666 solid 1px; font-size:15px; padding:4px;} .photolist {padding:10px 0px 0px 30px;} .photolist .photobox {background:none; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;} .photobox .photo {height:150px; width:118px; overflow:hidden;} .photobox .photoComment {color:#444444; font-size:11px;} .photolist .photobox_on {background:#222222; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;} .photobox_on .photo {height:150px; width:118px; overflow:hidden;} .photobox_on .photoComment {color:#999999; font-size:11px;} /* reviews page */ .reviewsBox {padding:10px 30px; border-bottom:#4b4b4b dashed 1px;} .reviewsBox .rev_headline {color:#cccccc; font-size:16px; font-weight:bold;} .reviewsBox .rev_text {padding:5px 5px 5px 30px; font-size:14px;} .reviewsBox .rev_source {text-align:right; font-size:13px; color:#666666;} /* licensing page */ .licenseSummary {margin:0px 20px 20px 20px; padding:20px; background:; color:#cccccc; border:#4b4b4b solid 2px;} .licenses {margin-top:70px;} .licenses .headline {font-size:14px;} .lic_tableSongs {border:none;} .lic_tableSongs .columnHeaders td {border-bottom:#4b4b4b solid 1px; font-weight:bold; font-size:11px;} .lic_tableSongs tr td {border-bottom:#4b4b4b dashed 1px; padding:5px 0px;} /* widgets page */ .widgetMargin { padding:8px 0px 8px 35px;} .widgetSpacer {width:100; height:15px; clear:both;} /* tag cloud */ .tagCloud {padding:10px;} .tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;} .tagCloud .cloudItem:hover {background:#005782; color:white; cursorointer;} .tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;} .tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;} .tagCloud .cloudS30 {font-size:11px; color:#999999;} .tagCloud .cloudS40 {font-size:12px; color:#999999;} .tagCloud .cloudS50 {font-size:14px; color:#666666;} .tagCloud .cloudS60 {font-size:16px; color:#666666;} .tagCloud .cloudS70 {font-size:18px; color:#333333;} .tagCloud .cloudS80 {font-size:22px; color:#333333;} .tagCloud .cloudS90 {font-size:28px; color:#111111; } .tagCloud .cloudS100 {font-size:36px; color:#111111;} .tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;} .tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;} .tagCloudMore a:hover {color:red; text-decoration:underline; cursorointer;} I've tried to insert a horizontal drop down CSS menu in my layout. However, the menu bar displays about 10 pixels lower in Firefox than it does in IE. <a href="(URL address blocked: See forum rules)">Link</a> I checked the margins, padding but can not seem to find a way to get the menu to display at the same position in both browsers. Any guidance is very appreciated. thanks. I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. 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 |
|||||||