|
CSS - Ok This Is Annoying! Positioning In Ie And Firefox Is Different.
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. Similar TutorialsHi guys, I'm new to this forum but the advice looks great - I hope someone can help me out! I'm having a really weird problem with my CSS in Windows Firefox. Everything displays fine in Mac.Opera, Mac.Firefox, Mac.Safari, Windows.IE7 but doesn't display correctly in Windows.Firefox! For some reason it's creating a gap between the menu tabs and the line below, it's coming from the padding-bottom of #ddcolortabs a .link which is 3px. However, I need this to create the right spacing between the bottom of the words in the menu and the top of the line. I'm not allowed to put a URL in this post, which is very annoying! If you think you could help I'll send you the link in a message I guess?! Let me know if there's another way! If anyone has any ideas for a solution I would be very grateful! Cheers, Andrew Hi! Let's consider this XHTML: (I've put the CSS in a style attr. for conciseness) [HTML] <div style="width:100%;height:70px;background: #D10C23;display:block;">dfsdfdsfsd <img src="haha.gif" width="1000" height="50"></div> [/HTML] Now, if you make the browser window in FF or Opera less than 1000 pixels wide (a horizontal scrollbar appears), and scroll to the right, you'll see that the background color doesn't span until the end of the page. Why is this? 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. 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. 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. 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 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>
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. 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 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'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? 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. 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 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;
}
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? 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. Hi all, haven't had to post for awhile. Need some help! Am trying to create a popup box below menu when hovering over link, strictly using CSS. My problem is everything's working perfect in IE(a rarity), but in Firefox the box pops up too high and is wider than I want Here's the code... CSS: Code:
body {
margin: 0; padding: 0;
background: url(bodybg.jpg) repeat-x #000;
}
#header {
position: absolute; top: 0; left: 0;
width: 100%; height: 100px;
background: url(metalpipe2.png) bottom repeat-x;
margin: 0; padding: 0;
}
#leftcontent {
position: absolute; top: 110px; left: 0;
width: 125px; height: 700px;
margin-left: 15px; padding: 0;
}
/*moved background to #leftcontent a. Can now create transparent gap for background to show between links.*/
#leftcontent a {
display: block;
margin: 0; padding: 5px;
font-weight: bold; font-size: 17px;
background: #222; color: #C00;
font-family: Arial;
text-align: center;
text-decoration: none;
}
#leftcontent a:hover {
color: lightgrey;
border: none;
}
/*had to add border: none; to make span box work in IE*/
#leftcontent a span {
display: none;
}
#leftcontent a:hover span {
display: block;
position: absolute; top: 255px; left: 0;
width: 135px;
margin-left: -5px; padding: 5px;
background: #000; color: lightgrey;
font-size: 12px;
border: 1px solid white;
}
#midcontent {
position: absolute; top: 110; left: 155px; right: 25px;
height: 700px;
margin: 0; padding: 0;
background: #F5F5F5;
}
#midcontent p {
margin: 0; padding: 20px;
}
HTML: Code:
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" href="TestPage.css" type="text/css" media="screen" />
<style type="text/css">
<!--
#leftcontent a#link1 {
color: #C00;
background: #444;
border: none;
padding: 5px;
}
--> </style>
</head>
<body>
<div id="header">
<img src="x-fire_logo_t4.png" alt="X-Fire logo" />
</div> <!-- end #header -->
<div id="leftcontent">
<a href="link" id="link1">Home</a>
<a href="link" id="link2">Home Fire Sprinklers<span>Text for<br />a:hover span { }<br />popup window</span></a>
<a href="link" id="link3">Fire Alarm Systems</a>
<a href="link" id="link4">Burglar Alarm Systems</a>
<a href="link" id="link5">Insurance<br /> Info.</a>
<a href="link" id="link6">Contact Us</a>
</div> <!-- end #leftcontent -->
<div id="midcontent">
<p>Here's my dilema. Hover over Home Fire Sprinklers link. There should be a popup window below menu.<br />Popup location & width looks great in IE.<br />But in Firefox it pops up higher & wider than I wish. </p>
<p>Could someone tell me what I'm overlooking?...Many Thanks!</p>
<p>Got idea from <a href="http://www.meyerweb.com/eric/css/edge/popups/demo.html">Eric Meyer's site</a>. His page doesn't encounter this problem and I can't see anything special in the source that's much different from mine.</p>
</div> <!-- end #midcontent -->
</body>
</html>
Many Thanks, James |
|||||||