|
CSS - Ie / Firefox Positioning Problem
Good evening ladies and gents,
This is my first post so I thank you guys for your help in advance, I usually just do trial and error with CSS untill it works but this one has me puzzled. on my website www/CanadaFinance/net the sidebar isnt aligning the same on IE and Firefox. In Firefox it aligns how I want it but in IE its far too left, the reason is the way <UL> is being treated by each browser. Can anyone teach me how to fish and get this problem fixed? Thanks. Similar Tutorialshttp://www.iusedtoloveher.com/wheelofgod/ I'm trying to move up the right-side box. I'm using Firefox but it's the same in IE7. Hello, If you view my site in IE first: www.tombraiders.net/katie/MyTombRaiderStories.html you'll see there's a mini menu where I have updates on the right hand side. If you view it in Firefox, the menu gets pushed down to the very bottom, under the main content. Does anyone know why this is happening, and how I can fix it? Thanks! I'm having problems positioning my content, it looks fine in Firefox, but its not positioning right in IE, you can see it pretty obviously he Http://saint.jacksriver.net The css file is he http://saint.jacksriver.net/wp-content/themes/benevolence/style.css Anyone got any ideas? Hi, I've been having problems with a design at www.matthewdingley.co.uk/langdale/team.php. On the subpage design, Firefox seems to randomly decide to put scroll bars in instead of pushing the footer to the bottom of the content. This seems to completely random when I press the refresh button (even when absolutely nothing about the code has been changed) although it does seem to be a larger problem with pages with a small amount of content in the left column. There is no problem in Internet Explorer. If anyone knows what the problem might be, their help would be greatly appreciated. Thanks, Matthew Dingley www.matthewdingley.co.uk Hi - I am using HVMENU from dynamicdrive.com. I have set this up to use relative positioning with the menu using the horizontal format. The code in my html file is: Quote: <div id="MenuPos" style="position:relative; width:750px; height:20px;"><img src="images/redspacer.gif" width="750" height="20" alt=""></div> This all lines up and works correctly using IE6. I have a problem when using firefox. If I set var MenuCentered='center' in the script file the menu is misaligned by about 10 - 20 pixels to the left on a page when there is a scroll bar on the side of the firefox browser. It works ok on short pages that do not have a scroll bar. If I set var MenuCentered='left' in the script file the problem is reversed in regard to the scrollbar. Have I overlooked anything? Is there anything I can do to correct this using CSS? Hello, I recently started creating websites again and I have been pulling my hair out on this Firefox compatibility issue. The site navigation looks great in IE but in Firefox a couple of the background images are skewed down and to the left. Since all my tricks from years ago are so outdated now, I decided to try CSS for a simplified navigation setup. The code is probably pretty messy since I chopped it together from numerous sources and still am not completely sure how it works. Background: I created a large 794x1200 PNG image that contains two complete border and navigation sets. I am using CSS to both position the appropriate portion in each table/cell as well as switching to a slice on the 2nd image set for rollover purposes. An example of the current test is he (URL address blocked: See forum rules) *not sure if this is okay but would be best to see the example. If it is not allowed as a non-clickable then feel free to delete. It is here - classtime . org / test6 . htm and the navigation image is he (URL address blocked: See forum rules) *classtime . org / navigate . png I would be eternally grateful to anyone that can help me figure out why the site works great in IE but is coming up skewed in Firefox. As a side note, when I pull up the site in Frontpage, it shows the left-most cell as being larger than it is supposed to be even though it is hardcoded. To get my left image bar to show up in the correct place I had to use a value of "left: -40px;" I'm not sure why that is but I suspect it has something to do with the problem. Thank you very much for taking a look. My jumbled code is as follows: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>Ultrasonic Blind Company - Elk Grove Village, Illinois</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css" media="screen">
a:link {color: #FFF4D1;}
a:visited {color: #FFF4D1;}
a:hover {color: #74060c;}
a:active {color: #FFF4D1;}
.top a
{
display: block;
width: 794px;
height: 120px;
background-image: url('navigate.png');
}
.top a:hover {
background-position: 0px -601px;
}
#left {
left: -40px;
width: 150px;
height: 460px;
display: block;
background: url('navigate.png');
background-repeat: no-repeat;
background-position: 0px -120px;
position: relative;
}
#left li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: center;
font: bold 18px Batang;
line-height: 50px;
}
#left li, #left a {height: 50px; width: 146px; display: block;}
#panel1b {top: 10px;}
#panel2b {top: 63px;}
#panel3b {top: 116px;}
#panel4b {top: 169px;}
#panel5b {top: 223px;}
#panel1b a:hover {background: transparent url('navigate.png') 0px -730px no-repeat}
#panel2b a:hover {background: transparent url('navigate.png') 0px -785px no-repeat}
#panel3b a:hover {background: transparent url('navigate.png') 0px -839px no-repeat}
#panel4b a:hover {background: transparent url('navigate.png') 0px -890px no-repeat}
#panel5b a:hover {background: transparent url('navigate.png') 0px -945px no-repeat}
#right {
width: 154px;
height: 460px;
display: block;
background: url('navigate.png');
background-repeat: no-repeat;
background-position: -640px -120px;
position: relative;
}
#right li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: right;
font: bold 18px Batang;
}
#right li, #right a {height: 85px; width: 154px; display: block;}
#panel1r {top: 0px;}
#panel2r {top: 100px;}
#panel3r {top: 200px;}
#panel4r {top: 300px;}
#panel1r a:hover {background: transparent url('navigate.png') -640px -721px no-repeat}
#panel2r a:hover {background: transparent url('navigate.png') -640px -821px no-repeat}
#panel3r a:hover {background: transparent url('navigate.png') -640px -921px no-repeat}
#panel4r a:hover {background: transparent url('navigate.png') -640px -1021px no-repeat}
</style>
</head>
<body bgcolor=#74060c>
<div align=center>
<table id="Table_01" width=794px height=600px border=0 cellpadding=0 cellspacing=0>
<tr>
<td colspan="3" height="120" width="794" bgcolor="#FFF4D1">
<div class="top">
<a href="(URL address blocked: See forum rules)"></a>
</div>
</td>
</tr>
<tr>
<td align=left valign=top height=674px width=150px bgcolor="#FFF4D1">
<ul id="left">
<li id="panel1b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Contact</a></li>
<li id="panel2b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Residential</a></li>
<li id="panel3b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Commercial</a></li>
<li id="panel4b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Coupons</a></li>
<li id="panel5b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Questions</a></li>
</ul>
</td>
<td align=left valign=top width=490px height=674px bgcolor="#FFF4D1">
aaa</td>
<td align=left valign=top width=154px height=674px bgcolor="#FFF4D1">
<p align=right> <ul id="right">
<li id="panel1r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
<li id="panel2r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
<li id="panel3r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
<li id="panel4r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
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. Take a look at the Firefox positioning and the disastrous positioning in IE and let me know what I need to do fix the div tag: Code:
function areYouSure(){
var newDiv = document.createElement("div");
newDiv.setAttribute('style', 'position: absolute; left: 200px; top: 250px; text-align: center; width: 500px; height: 120px; z-index: 3; background-color: #999999;');
newDiv.setAttribute('id', 'add_to_db');
newDiv.innerHTML = "<div style='float: left; margin: 10px 10px 10px 10px;width: 480px; height: 100px; background-color: #D2C5A0;'>Are you sure you want to add it to the database?<br /><span style='position: absolute; left: 200px; top: 50px; text-align: center;'><input type='button' value='Yes' style='float:left; text-align: center; margin: 5px 5px 5px 5px; background-color: #4C5454; color: #FFFFFF; font-weight: bold; font-size: 12px; border-color: #98A9A9;' onClick='addToDb();' /><a href='javascript: cancelAddToDb();'><span style='float:left; text-align: center; margin: 5px 5px 5px 5px; background-color: #4C5454; color: #FFFFFF; font-weight: bold; font-size: 12px; border-color: #98A9A9; width: 60px; height: 20px; display: block;'>Cancel</span></a></span></div>";
// And then inject it:
document.body.appendChild(newDiv);
}
function cancelAddToDb(){
var olddiv = document.getElementById('add_to_db');
if (olddiv && olddiv.parentNode && olddiv.parentNode.removeChild){
olddiv.parentNode.removeChild(olddiv);
}
}
The Page The problem is the div with the controls in it (wheel: <dropdown>, etc.). I need it to be bumped up against the bottom of the large image above it, and it's working fine in Firefox. Unfortunately, IE is bumping it downward to it wraps instead of of nestling into position. The css for it: .controls { clear: both; width: 660px; text-align: center; } And the instructions box it's bumping up against: #instructions { float: left; width: 300px; display: inline; margin-left: 5px; } The problem has been there for a while, but wasn't really noticeable until I added the default text for counters section, which pushed the rest off the bottom of the screen (at 1280 x 1024). Any help would be greatly appreciated. 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 Still learning CSS and trying to position simple text inside a layer on my clients site: The CSS positioning and font size are all appearing different in Safari (MAC), IE and Firefox. What am I doing wrong here? Go to : http://www.fractiousmusic.com At the bottom left corner I am trying to position the Steady Systems text. IE - looks fine Firefox - slightly positioned to the right Safari - completely out of wack. Covering one of the band member silohouettes and the font size is all wrong. Please view source and let me know if its a code error. Thanks! Daniel I'm trying to do some positioning with CSS laying out borders for my website which are composed of images. ie....border_left.jpg and border_bottom.jpg. My style sheet looks like this. .border_image_left { position: absolute; top: 119px; left: 0px } .border_image_bottom { position: absolute; top: 719px; left: 0px } In my html I have code like this. <p class="border_image_left"><img src="img/left_border.jpg"></p> <p class="border_image_bottom"><img src="img/bottom_border.jpg"></p> however IE and Firefox are rendering it different Firefox shows more space than IE. Anyway to correct this issue. Or any other trick for laying out borders with using a table? Thanks Hi everybody, The basic set up of a site I'm creating is I have a div with a table inside it both set to 1000px wide. Within the table are the images that make up the background of the site. Also within the core div is another div which contains a music player set to absolute positioning. Everything looks perfect in IE however the music player goes beyond the bottom of the image behind it in Firefox. The music player itself doesn't move, only the pictures behind it so that leads me to believe it's an issue with where the starting point of the table is rather than the core div. I'm completely out of ideas. Does anybody have any thoughts? I tried to include a link to the page incase anybody wanted to look at the actual coding but the forum wouldn't allow me since I'm a new user. For some reason the table isn't being positioned properly in firefox, but it is in IE. The attribute top:15% seems to not be used in firefox, does anyone know if I should be doing it another way? Here is my css: Code:
div.leftBorder
{
position:absolute;
height:100%;
width:15%;
background-color:#DDDDDD;
}
p.imgText{
font-size:18px;
position:absolute;
left:1%;
top:1%;
color:#CC0000;
}
table.menuTable{
position:relative;
top:15%;
}
Here is the html: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="specs.css">
<title></title>
</head>
<body>
<div class="leftBorder"></div>
<p class="imgText">MEDITECH Interface Specifications</p>
<center>
<table class="menuTable" cellspacing=0>
<!-- Spec number menu Title -->
<tr>
<th class="menuTitle">Spec. Number</th>
<th class="menuTitle">Description</th>
</tr>
<!-- Spec number menu -->
<tr>
<td class="menuSpec"><a href=".\R404.htm" target="iframe">R404</a></td>
<td class="menuDesc">MEDITECH MAGIC C/S Admissions System to Other Vendor Ancillary System</td>
</tr>
<tr>
<td class="menuSpec"><a href=".\R469.htm" target="iframe">R469</a></td>
<td class="menuDesc">EDI Integration: ANSI Formats 270 and 271 for Insurance Eligibility
</tr>
<tr>
<td class="menuSpec"><a href=".\R948.htm" target="iframe">R948</a></td>
<td class="menuDesc">MEDITECH MAGIC C/S ITS Orders to Other Vendor Image Viewing System</td>
</tr>
<tr>
<td class="menuSpec"><a href=".\R949.htm" target="iframe">R949</a></td>
<td class="menuDesc">MEDITECH MAGIC C/S ITS Reports to Other Vendor Image Viewing System</td>
</tr>
<tr>
<td class="menuSpec"><a href=".\R953.htm" target="iframe">R953</a></td>
<td class="menuDesc">Other Vendor Image Status Updates to MEDITECH ITS Application</td>
</tr>
</table>
<iframe name="iframe" frameborder=0 marginwidth=10 width=70 height=70></iframe>
</center>
</body>
</html>
This is REALLY basic and annoying the hell out of me. http://www.magikwebs.co.uk/chromeborder/ This looks fine in Firefox, but in IE there is a small gap between the images in the top div and the one in the bottom. I've tried styling the divs to remove padding, margins etc but to not avail. Can anyone tell me how to fix this for stupid IE? Thanks, John. hi. i'm having a problem getting my content to show up in the same place in internet explorer and firefox. for some reason the block of text is slightly higher in internet explorer. here is the css: .content { position: absolute; top: 94px; left: 163px; width: 400px; } and the html: <div class="content"> <p>content content content</p> <div> has anyone else noticed this? is there a way to fix it? Well I'm pretty uneducated in CSS, I have just played around with it hours and hours and always figured out what I was trying to do. But right now I am stumped. Please view the following page in FireFox if you have it: http://www.iqdrop.com/newiq/index.php Then in IE You see the Google ad is dropped way down in IE for some reason and overlaps my menu, and the <DIV> containing the word "index.php" is also taller in IE. I'm not sure what is wrong and I've been trying all sorts of things with no luck. Thanks for any help. im having trouble getting some elements to move off to the right side of my layout. it appears how i want in firefox but completly wrong in IE. id like the "new release" section to be on the upper right hand of the page right next to the news content. IE forces it down to the lower right for some reason. and also causes some other weird looking artifacts or something. i know you can see my style sheet from that site so ill post a portion of it here. im still pretty new to a lot of this soplease try to make any help relatively simple if possible here is the link to the page: http://spore.50megs.com/index.html Code: release-art {
border: 0;
margin: 0;
padding: 0;
width: 93px;
}
.release-info {
float: right;
margin: -70px 0 0 0;
padding: 0;
width: 145px;
}
#releases {
background: #bbbbb8 url('bg-pattern-content.gif') repeat;
margin: 0 0 0 auto;
padding: 0;
text-align: justify;
width: 245px;
}
#releases .release-category {
font-weight: bold;
}
#release-details {
list-style: none;
margin: 0;
padding: 0;
}
#releases li {
margin: 0;
padding: 0;
}
Please look at http://www.rodstrans.com/diagnosis/body_leaks.html In IE & Chrome the checkboxes are positioned absolute in each table cell, but in Firefox they all bunch at the top left. I have put a position:relative on all parent elements and can not figure out what is happening. |
|||||||