|
CSS - Positioning Inconsistency Between Ie And Firefox
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. Similar TutorialsHi all, I'm something of a noob when it comes to html and css but I usually manage to scrape by. However I have a bizzare problem. I have a background image (that I'm not repeating due to a graphic) and I want it positioned at the top left hand corner of the browser window. I used CSS positioning to achieve this and it works just fine, however, when I uploaded my files online to my server, the image won't go to the upper left hand corner of the browser window. It sits there close to the upper hand left side but doesn't touch the end, and there is a black border around the image (which is the color I've set as the background). So my issue is, when I work off my mac, the background image is positioned where I want it to be, but once I upload my files to my site, it disregards that positioning and puts the background image in something of a default position. I've checked on Safari and Firefox and they both do the same thing, but display correctly when I view the html file off my computer. Is there some formatting thing that I'm missing? Here is my code: HTML: <div id="background_image"><img src="background.jpg" alt="background" /></div> CSS: #background_image { position:absolute; left:0px; top:0px; z-index: 1; } 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 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. I can't for the life of me figure why IE displays this differently than all the other browsers I've tried (FF, Opera, Chrome). www dot ultra-ms dot com slash test At the bottom of the page I have a navigation section as well as a breadcrumb trail. The navigation is pushed to the left side and the breadcrumb to the right. IE, however, inserts a line break between the two causing the breadcrumb to be on the next line down. I want them on the same line. Here's the CSS rules that govern this section Code:
#footer {
font-size: 8pt;
font-family: Arial, sans-serif;
color: #999999;
width: 990px;
padding-left: 10px;
border-top-style: dotted;
border-top-color: #999999;
border-bottom-style: dotted;
border-bottom-color: #999999;
border-width: thin;
clear: both;
}
.breadcrumb {
float: right;
padding-right: 15px;
}
And here is the HTML for that part. Code:
<div id="footer">
<a href="index.html">Home</a> | <a href="profile.html">Profile</a> |
<a href="capabilities.html">Capabilities</a> | <a href="careers.html">Careers</a> |
<a href="contact.html">Contact</a> | <a href="sitemap.html">Site Map</a>
<div class="breadcrumb">
<a href="index.html">Home</a> > Careers
</div>
</div>
Can someone help? Hiya, I was wondering if anyone out there would be willing to take a look and tell me why this works in everything except IE6. I really don't want to go back and re-architect this with tables. it took too long in the first place. http://www.theblackkeys.com/dev/ Any quick help is appreciated. Original deadline was tonight. 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'm sure this question has been asked a million times. I have some navigation that looks like this when closed: Link1 Link2 Link3 Link4 and this when open: Link1 Link2 Link3 sublink for Link3 Link4 I've used "margin" for the subLink class to create the right amount of space above and below the sublink, but it gets displayed totally differently in the different browsers. On my mac it looks perfect with margin: -16px 0px 0px 4px; but on Windows the negative margin has the result that the sublink gets displayed right on top of Link3. Using margin is probably not the right way to do it. Padding has the same effect. Can anyone help? Thanks, LauraS. 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. 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. 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 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 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>
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? http://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! 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 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? The submenus are not lining up properly in Firefox or Safari but it looks right in IE. If I fix how it looks in Firefox and Safari, it will not look right in IE. Anyone know how to solve this? Here is the link: link to problem |
|||||||