|
CSS - Positions In Ie6 Vs Ie7 And Ff
Hi,
Is it my imagination, or does position work different in IE6 and IE7/FF? Seems like even if you say: position: absolute; top: 90px; left: 516px; width: 503px; height: 636px; it does not put it where you think it should in IE6.... Does anybody have a work around or any advice? Does IE6 support the "position" attribute? I'm scratching my head.... Similar TutorialsHi all using this code to seperate a line into two sections not working right: Code:
<div class="content">
<div style="float:left; width: 50%;">
{$lang['unread']} <img src="templates/{$site_config['template']}/images/pm_marker_new.gif" alt="unread" /> | {$lang['read']} <img src="templates/{$site_config['template']}/images/pm_marker.gif" alt="read" />
</div>
<div style="float:right; width: 50%;">
dsfdfds
</div>
</div>
Ends up like this: http://i43.photobucket.com/albums/e397/clericvash/Clipboard02-4.jpg (where the dffdfd and the small images on the left should be in the box?) Hi, I need help with a container div. Something is screwy in the way I have nested my divs and I think it has something to do with position: relative or absolute. I get the difference between the two, but not the relationship. Can someone tell me what I'm doing wrong? http://idiaonline.com/websites/taz/index.php Code: <div id="container">
<div class="logo"></div><div class="top"></div>
<div class="navline"></div>
<div class="navbar">
<div class="navsquare"><img src="images/faq.gif" alt="Taz Limousine Service Policy" width="43" height="41" /><br />F.A.Q.</div>
<div class="navsquare"><img src="images/fleet.gif" alt="Our Vehicles" width="43" height="41" /><br />Fleet</div>
<div class="navsquare"><img src="images/contact.gif" alt="Contact Us" width="43" height="41" /><br />Contact</div>
<div class="navsquare"><img src="images/maps.gif" alt="Maps & Directions" /><br />Maps</div>
</div>
<div class="content">
<div id="left">
<div class="about">
<p><br />
<br />
Taz Limousine is dedicated to dependable,courteous and quality service for business or personal transportation at competitive pricing. In order to achieve that goal in a secure and comfortable environment we rely on experienced chauffeurs and well maintained vehicles that meet city, state and federal regulations. Thank you for considering Taz Limousine Service.</p>
<p> </p>
<div class="weather">
<div align="center">
<br />
<p></p>
</div>
</div>
<div style="float:right; width:150px;"><br /><br />
<h2> Atlanta, GA</h2>
</div>
</div>
</div>
<div id="mid"> <div class="rotate"><img src="images/rotate/rotate.php" alt="Limousine Service Atlanta" /></div></div>
<div id="right"><div class="special">
<h1> Reserve A Limo Today!</h1>
</div></div>
</div>
</div>
and css Code:
body, html {
font-family:Arial, Helvetica, sans-serif;
color:white;
height:100%;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #FFFFFF;
text-decoration: none;
font-weight:bold;
}
a:visited {
text-decoration: none;
color: #0066FF;
}
a:hover {
text-decoration: underline;
color: #0000FF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
#container {
width:800px;
margin: 0px auto;
position:relative;
background:#000033;
border: thin #0000ff solid;
}
.top {
height: 108px;
width: 800px;
position: absolute;
left: 0px;
top: 0px;
background-image:url(images/gradient.jpg);
background-repeat: repeat;
z-index: 2;
}
.logo {
background-image: url(images/taz-logo.gif);
background-repeat: no-repeat;
background-position:top;
height: 60px;
width: 305px;
left: 0px;
top: 25px;
z-index:4;
position:absolute;
}
.navline {
background-image: url(images/blk-gradient.jpg);
background-repeat: repeat-x;
position: absolute;
height: 42px;
width: 100%;
left: 0px;
top: 108px;
z-index: 3;
}
.content {
background:#000033;
position: absolute;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
z-index: 1;
border:solid #0000ff thin;
}
.navbar {
position: absolute;
height: 60px;
left: 60%;
top: 75px;
z-index: 15;
width:288px;
}
.navsquare {
position:relative;
float:left;
height:60px;
width:72px;
background-image:url(images/nav-square.gif);
background-repeat:no-repeat;
text-align:center;
font-size:9px;
font-style:italic;
}
.about {
position:relative;
left:5%;
top:40%;
background-image:url(images/about_taz_limousine.gif);
background-repeat:no-repeat;
width:225px;
height:150px;
font-size:10px;
padding-left:25px;
z-index:4;
}
.rotate {
position:relative;
top:10%;
z-index:3;
}
.weather {
position:absolute;
background-color:#000033;
top:159px;
background-image:url(images/weatherbox.jpg);
background-position:left;
background-repeat:no-repeat;
height:81px;
width:94px;
left: 6px;
}
.special {
background-image:url(images/special.gif);
width:271px;
height:88px;
position:absolute;
text-align:center;
top:15%;
}
#left {
float:left;
position:relative;
top:200px;
width:35%;
z-index:50;
}
#mid {
float:left;
position:relative;
top:175px;
width:35%;
}
#right {
float:left;
position:relative;
top:200px;
height:300px;
width:30%;
z-index:30;
}
h2 {
font-size:15px;
}
h1 {
font-size:18px;
font-variant:small-caps;
}
hey all, hopefully someone in here will be able to help me. what I am interested in is how to tell a div to render at the base of the page, once I have it there I intend to make it float so that it is always at the base. does anyone know the x,y positions for the very bottom of the displayed window? any help would be greatly appreciated, thanks in advance. Hey there! I am having a problem changing my website's layout around a bit. http://www.apollomix.com As you can see, the main content area is wrapped in a div called "contentWrapper". This helps it maintain its shape, et cetera. It has a maximum width allotment as well, so that text (and other things) won't be stretched beyond beauty. Basically, what I am trying to do is align #contentWrapper to the right of the screen (to the left of that dropdown menu, and other sidebars, such as the chat box). After I get that align working, I want to stick another div to the left that fills up the remaining margin, but not past it. Essentially, I am trying to make it look like this: (forgive the sloppy image doctoring) Click me! Basically, that big stretch of gray on the right should expand or shrink depending on the screen size... with anything bigger than contentWrapper's max-width resulting in the div stretching. Furthermore, it should be as tall as the screen, if possible, essentially touching the footer of the page. Also, I'd like the banner to shift over as well, as you can see. Those lines should also expand. I'm assuming that could be done by adding another div to the left of the banner with the lines as its background, but I'm not entirely sure. What do you recommend? Thanks for your help! Media Example of the site BEFORE-HAND using Tables when viewed at 1280x1024. [Content Table Boxes Adjustable By Window Size] Image File HERE Since this archived picture version the following major changes have occured : -- Removal of Tables in Favor of full CSS/DIV -- Removal of PNG borders in favor of JavaScript/CSS Ones (Custom Coded) -- Additional box beside the main content box. -- W3C XHTML 1.1 Validatable. Site Package (Includes CSS, HTML and JScripts) Site Package HERE Issues Firefox * Content overFlows for content when window is resized too small. * Table width's are ignored (example : tIcon is set for width:32px yet expands/contracts) * <br /> tag induces too much space (adjusting line-height is a sloppy fix + causes IE to bug) IE 6 * Float bugs exist when window is resized too small. & MANY insane bugs insue as a result of the float bugs shifting content. * Main Box does not assume full 100% available space when no content is present Both * Header Content + Background Dissapears when horizontal scrollbars are used * Alternate DIV ONLY fix needed for grid layout (instead of the table I slid in) * Less absolute position approachs needed. (complicates strecthable atmosphere slightly) * Float should be replaced with display:inline (if possible -- I can't figure out how.) Comments I've tried almost everything I can think of to fix these and I am quite new to CSS/DIV structured sites. I would VERY MUCH appreciate any help that can be offered. At the moment, my target browsers are IE6 and Firefox. Here is the page: http://www.usdphidelts.com/alumni/map.php There are <div> box's that need to be placed next to each other, one contains the map, the other contains the information about the icon click on the map. It looks like with my current CSS, the two <div>'s names map and alumni are being placed on top of one another. Any idea how I can get them to layout next to each other? Thanks! Greetings, I posted this question in the HTML forum, too, but I realize that maybe the answer to this question would better be provided by CSS2, rather than using HTML tables, as the latter may be deprecated in the future--it seems--as a layout tool. I used to be able to position an image, or anything basically, in a table cell that is in the "absolute middle" of a web page, i.e. centered horizontally and vertically, using Dreamweaver MX. But, for some weird reason, I cannot do it anymore using Dreamweaver MX 2004. No matter what I try, the image or contents of the cell or table are always at the top of the page, centered horizontally, yes, but not vertically. I tried nesting a table within a table, and I tried using a percentage-based 3x3 table, but nothing works. I noticed that the "height" attribute of a table is deprecated now, thus, you should not give a table a "height" of 100%. Is that the reason? And if so, then what is another way to do this now? I mean putting an image or so in the absolute middle or center of a page? Better yet... What I really want to do is to place an image in the vertical center of a page, yet a bit to the side, but within proportion to the page of the visitor. Meaning, I'd like the center of the image, for example, to always have 50% of the page over it and 50% below it, exactly; and I'd like it to have 33% of the page to its right side, for instance, and 66% to its left side, always, regardless to the visitor's resolution. Now how can I do this, especially using Dreamweaver MX 2004? Thanks for anyone taking the time to help. I'll try to attach an image to demonstrate what I mean visually. http://forums.devshed.com/attachmen...tachmentid=4599 Hi guys! Ok here's the thing, I've tried everything I know and hunted the net trying to find an answer, and just when I think I have, another issue crops up. Sorry about the title but I just don't know what to call what it is I'm trying to do. But it SHOULD be possible, and it SHOULD be really simple, which is frustrating the heck out of me because I cannot get this to work! Here is what I'm trying to do, complete with pictures to help visualize things. Example This shows how I want my site layout to appear. A regular width site so it can be displayed on low res desktops, BUT with extra artwork on the left and right, complete with a couple of flash animations to the sides. Code: http://img708.imageshack.us/img708/2458/layoutstyle.jpg The red outline shows a typical 800x600 display, as you can see, they should only be able to see what's in the center of the page. The dark blue outline shows a much higher resolution display The light blue color shows the extra artwork only revealed to higher resolutions The flash boxes contain flash elements which should remain fixed in those locations regardless of the resolution the user is using (they'd be setup to match the background image, so must not move) The dark blue outline shows how the same site would look on a much higher resolution. Instead of black space to the left or right, or the actual site stretching to fit (not looking for a liquid layout in this case), they get to see the rest of the artwork, plus the flash elements. The purpose of this is so it will look fine on low resolution displays, but also, when viewed on higher resolution displays, will then show the extra artwork instead of blackness. Problems Just when it looks like it might work, I find that each browser displays things incorrectly, pixels, picas, ems, etc. and so on. How do I get it to work across the board? I don't want to be unprofessional and do the "This site should only be viewed in X browser". The flash enabled parts always wrap and refuse to appear off screen, how do I fix this? When I place them, I want them to stay exactly where they are (which is offscreen on a low resolution, but visible on a higher resolution), not bunch up and move out of place. I can get the actual background to appear correctly, so when resizing the browser, it remains fixed in the center and reveals the rest of the artwork both left and right. But other elements simply refuse to behave correctly (see first problem, this happens especially with browsers not rendering the same things the same, such as pixels etc. being done differently in each browser). If you want a real world example of what I'm trying to achieve, please view the following website: Code: http://us.blizzard.com/diablo3/?rhtml=y unfortunately I have no idea what language they used and it looks unreadable to me, so borrowing from view source isn't an option for me in this case (I use Dreamweaver, css and php, and have no understanding of xml or whatever it is they're using, neither do I have the time to learn another language). Is there anyone who can help me here, cause this is REALLY frustrating me now, it should be incredibly simple but it's not, and I feel as if I'm being forced to abandon everyone who doesn't have X display and X browser. Which I don't want to do. P.S. Sorry about the weird links, seems new accounts can't use url's *shrugs*. |
|||||||