|
CSS - Typical Absolute Issue With Ie
i am relatively new to CSS and would like to know if anyone can assist in helping me figure out why IE on the PC is not displaying page elements properly.
Here is the link: Well it was blocked. Hmm... how am I supposed to do this? Please have an administrator email me so I can figure out how to add a link to my problem. Unless I am supposed to include all HTML and CSS code???? On both the contact and home pages, there are elements, or columns, that belong on the the left side of the page. Yet they appear on the right side of the page on IE for PC. They appear as designed in Safari, FF, Opera and even IE 5.2 on a Mac. Any help is greatly appreciated. Similar TutorialsWHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! Hello all, I am having a problem I can't seem to figure out. The site is: http://www.ciccotticenter.org/test_site/ When you view the site in IE6, the logo in the top left corner disappears. I have tried everything I can think of. Interestingly when I add * { border: 1px solid red; } it works. But I can't figure out what thats doing to make it work. Any ideas? Thanks, Ryan I thought I had this issue resolved on Friday, but upon viewing my page in IE I realized that it isn't in the slightest. I have a .title style that is devoted to headings that have a bottom border and sometimes some text that right aligns which is encapsulated within <p></p> tags... This all looks fine and dandy when viewed in Firefox, but within IE I get no bottom border and the text within my <p></p> tags is at the very bottom of the page. Here is what I have so far: Code: .title { border-bottom: 1px solid #0033FF; position: relative; }
.title h1 {
color: #0033FF;
margin: 0px;
padding: 0px;
font-size: 1.6em;
font-weight: bold;
}
.title p {
margin: 0px;
position: absolute;
padding: 0px;
bottom: 0px;
right: 0px;
}
.title p A { color: #000; text-decoration: none; }
Code: <div class="title" align="left"> <p><a href="index.php?p=admin">Add News</a></p> <h1>News Updates:</h1> </div> Please look at this page - http://casadelsol.tmhdesign.com/about.asp I have a div with an id of "header". In that div I placed this code Code: <div style="width:200px;height:200px;background-color:yellow;margin:0 0 -50px 400px;z-index:10000"> </div> As you can see it goes under the absolutely positioned div element with an id of top_header. I want to put a drop-down menu in the top header area but it slides under the top_header element. Can you help? Thanks I'm simply trying to center a horizontal menu with a drop down. The two methods I know of to align the list items in the top menu are 1) Code: li { float: left; }
and 2) Code: li { display: inline; }
. The first method is needed for absolute positioning of the drop down list, but it left aligns the top menu. The second method centers the menu (desired affect) but throws off the drop down placement because the it lacks the containing block. Works, but left aligned: http://www.highgatecross.com/develo...ered_menu1.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Centered</title>
<style type="text/css" title="style" media="all">
#navigation {
position: relative;
margin: 0 auto;
width: 800px;
height: 30px;
background: #9E9670 }
a {
font: 11px verdana, sans-serif;
color: #54503B;
text-decoration: none }
#menu {
position: relative;
margin: 0 auto;
padding: 0;
width: 600px;
border: 1px solid #c00;
text-align:center }
#menu li {
float: left;
list-style: none }
#menu li a {
display: block;
padding: 7px 25px }
#menu li a:hover {
color: #F4E9AD }
#menu li ul {
position: absolute;
left: -1000em;
z-index: 10 }
#menu ul {
float: left;
width: 100px;
list-style: none;
padding: 0 }
#menu ul li a {
display: block;
padding: 7px 10px;
background-color: #C7BE8D;
width: 100px }
#menu ul li a:hover {
background: #F4E9AD;
color: #54503B }
#menu li:hover ul {
left: auto }
</style>
</head>
<body>
<div id="navigation">
<ul id="menu">
<li class="top"><a href="Home">Home</a></li>
<li class="top"><a href="About">About</a></li>
<li class="top"><a href="Training">Training</a>
<ul>
<li><a href="Overview">Overview</a></li>
<li><a href="Training_Schedule">Schedule</a></li>
<li><a href="Training_Contact">Contact</a></li>
</ul>
</li>
<li class="top"><a href="Events">Events</a></li>
<li class="top"><a href="Contact">Contact</a></li>
</ul>
</div>
</body>
</html>
Centers, but drop down is in the wrong place: http://www.highgatecross.com/develo...ered_menu2.html Code:
#menu li {
display: inline; /* float: left */
list-style: none }
#menu li a {
display: block; /* delete this line */
padding: 7px 25px }
Note: I normally have my closing } flush left, but trying to keep it clean for the forum. And yes, this is not IE compatible. Question: How to I center the top menu and have the drop down placed correctly? Thanks. I can't figure out why the ul with the id #two is not responding to my position attempt. It is child of an li in the ul w/ a class .menu on www.eagletransmission.net If you mouse over Gallery the dropdown should be flush with the left side of the parent li but it is not. Aaaaargh Tom on my page http://tampabay-online.org/cetr/news/ the left side : Code: .content {
position:relative;
width:300px;
margin-left: 155px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
and the two on the right are : Code: #right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
#sidebar {
position:absolute;
width:200px;
top:400px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
If someone has a their font bigger on the artists section then the div will grow and go under the sidebar div. Any way to make these relative or fix that problem? Thanks! I am trying to position a footer at the bottom right hand corner of the page with style
Code: {position: absolute; bottom: 0px; right: 0px;}
However, the footer is not lying on the bottom, its about an inch off the bottom, interfering with a form field. How do I fix this? I can't create a complicated webpage without using absolute positioning for areas. For ex I want to create 2 top areas of screen width on top of page. Then I want 3 columns with 1st and 3rd columns having 3-4 seperate containers. Without using absolute I am way to confusied to get this happening. When using Absolute positioning is it best to have the first <div> be static so that that the Absolute Positioning has something a reference point? Thank you Hello everyone, I would like to ask for any and all help on solving this problem I am having. Well recently I used to make all of my web sites in tables until I came upon an article saying you should use CSS and absolute positioning. Therefore, my problem is this, If you go to this partially completed site, http://sykotic-designz.org/newsite/index.html. You will now notice that there are two 'shadow' images. One on the left and one on the right. The one on the left works fine. Test it by making your browser window smaller and bigger. You will notice the right shadow moves. I have tried various alternatives like using a table just for the one image but you still need to use absolute position and did not work, I have messed with displaying absolute position by % and by pixels. But it doesn't want to seem to work either. I am mainly having problems probably because I am new to the DIV tags in which I use entirely through out this page, I am not sure if CSS will help at all. You can view the source of the page if you wish. I appreciate and and all help you may provide, thanks! I have a DIV that is positioned as absolute and have used the required CSS to make it centered. But when viewed in Internet Explorer it is 1 or 2 pixels off-center?? Here is the CSS code: Code:
div.mpheader {
position: absolute;
display: block;
overflow: hidden;
padding: 0px;
top: 0px;
width: 900px;
height: 655px;
margin-top: 0px;
margin-left: -450px;
left: 50.0%;
background-image: url(images/header.png);
}
and the HTML code in the body: Code: <div class="mpheader"> </div> and here is the link to the site: highriserocks.com/maydayparade I have other CSS for A classes which are inside the DIV tags also but it's just the main image that is slightly off center. Any ideas?? Much appreciated! Adam I've only just started mucking round with CSS. Just by looking at other peoples sites and seeing how they do something, and then mucking around with what they've written to learn it. What I am trying to do at the moment, is just have a blank page with at the absolute center (Vertical and Horizontal) of the screen have some text. But the text is only horizontally centered not vertically. Heres the codes: In seperate stylesheet Code: #center {
position: absolute
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
and in the page Code: <div id="center">
<p><span class="aus">Austrlia</span><br>
<span class="contact">admin@sixfootone.com +61 412 587890</span>
</p></div>
Any ideas? Thanks Hi everyone, I just stated handcoding and I am having a great time. Everything seemed to be going well on my first site until I previewed it on IE. After solving the nasty png issue, I realized that the two elements that I have absolute postioned a) screw the layout up in IE6 b) don't appear all together in IE7 and IE8, but doesn't screw up the flow. The elements are an arm that is supposed to hang off the left side, and hair that sits above the contentwrap (you will understand once you look) It renders perfectly in Firefox, safari and google chrome. Go figure. I read I can't put hyperlinks because of spam, so if you don't mind helping out, please visit: w w w . goscoblog. com/test/index.html Thanks In advance I'm putting together a site using a CSS template, and hefty use of position: absolute. You can view it he http://www.goldenturmeric.com/layout.php The layout comes out great in FF 2.0 and IE 7. However, the main body of the site doesn't come out at all in IE 6. I've monkeyed around a little with changing to position: relative and a few other things and it completely throws it off. I'm sorry if I'm not doing this the right way or position: absolute is avoided or something. If so, I didn't know. Anyone's help is much appreciated. I think the best way to explain this is by example, if you go to this page: http://lifeyouwant.workinprogress.co.uk/how-we-work You will notice the drop down menu works fine in Firefox, Safari, Opera etc. However when it comes to IE7 the drop down menu is positioned too far to the right. Has anyone got any ideas how I can get this to display correctly in IE7 (like it does in Firefox). I would prefer to try not to use a hack for IE7. ANy ideas would be great! Thanks. Hi, I have a div which is centered in the area right of the menu. However, I am trying to get it so it sits absoultly center. The width of the menu is forcing its center line to be 180px right of true center. Here is the link: http://www.zombiemod.com/rm/nina2/about.html Here is the HTML: Code: <div id="main-image-container"> <h5><b>ME: SWEDE & TAURUS</b> - It must be a good combination<br /><br /> Patient, reliable, persistent & determined. They will do their jobs to perfection, or at least as close to it as possible. </h5> </div> Here is the CSS: Code: #main-image-container {
position: relative;
overflow: hidden;
width:600px;
margin-left:auto;
margin-right:auto;
}
Can anyone help me with this please? I tried to offset the main image container by -180px but that didnt work. If I do something like this: .divSubHomeRtPhoto { position: absolute; left: 340px; top: 167px; width: 420px; height: 420px; } Then <div class="divSubHomeRtPhoto"> my left and top positions don't seem to take in IE 5.2 for Mac. This seems to be fairly well known, from what I read on the internet. What this means for me though, is that I have to almost do away with positioning through CSS if I want my pages to work with IE 5.2 Mac, whcih I recently discoverd I do want to work. How do other cross browser CSS writes deal with this problem? Thanks for your help CJB 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>
Hi, I was wondering if any CSS experts could give me some advice on how to position elements on a page. Right now I'm really into using absolute positioning because it just seems so easy to place things on an exact point on the screen irrespective of all other elements, but I am wondering whether that is considered bad practice, any advice would be greatly appreciated. Thank you in advance for any correspondence. |
|||||||