|
CSS - Serious Css Positioning Problems With Mac Browsers
i was wondering if anybody could check my source and tell me what i'm doing wrong. the few parts i am positioning (the navigation & the iframe) are not positioned correctly on screen on Mac browsers.
any help would be greatly appreciated. thanks! Code: Original - Code #Nav { position : absolute; left : 483px; top : 230px; } #Frame { position : absolute; left : 483px; top : 290px; }
#Nav {
position : absolute;
left : 483px;
top : 230px;
}
#Frame {
position : absolute;
left : 483px;
top : 290px;
}
Similar TutorialsFor some reason, I can't get this to look right in both Firefox and Explorer; I haven't even bothered trying this on Macs, Safari, etc.! The relevant HTML: Code: <div id="wrapper">
<div id="header"></div>
<div id="navbar">
<p>
<a id="selected" href="index.php#content">Home</a>
<a href="about.php#content">About</a>
<a href="screenings.php#content">Screenings</a>
<a href="trailer.php#content">Trailer</a>
<a href="gallery.php#content">Gallery</a>
<a href="comeplay.php#content">Come Play!</a>
</p>
</div>
<div id="main">
</div>
</div>
The relevant CSS:
#header
{
margin: 0 auto;
text-align: center;
width: 830px;
height: 534px;
background: #fff url(images/logo.jpg) top center no-repeat;
border: 0;
padding: 0;
margin-bottom: 0;
}
#navbar
{
background: url(images/horizontal_divider.jpg) #fff;
width: 830px;
height: 40px;
padding: 0;
margin: 0 auto;
margin-top: -10px;
vertical-align: bottom;
}
#navbar p
{
position: relative;
bottom: -18px;
left: 50px;
margin: 0;
padding: 0;
}
#navbar #selected
{
background: #FFF;
font-weight: bold;
border-width: 1px 1px 1px 1px;
border-top-color: #000;
border-right-color: #000;
border-left-color: #000;
border-bottom-color: #fff;
color: #000;
}
#navbar a
{
text-decoration: none;
color: #333366;
border: solid;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-color: #666699;
border-right-color: #666699;
border-left-color: #666699;
border-bottom-color: #000;
margin: 0 -4px 0 0;
padding: 3px 6px 0 6px;
background: #CCF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
}
If you want to see the URL, please IM me (new users are not allowed to post them, it seems). For some reason, Firefox always outputs the navbar <p> one pixel lower than Explorer, which screws up the effect I'm going for. Also, for some reason, while Firefox does the borders just fine, Explorer doesn't render the border-top of the navbar when it's only 1 pixel wide (if I make it 2 pixels wide, only THEN will Explorer it [at 1 pixel wide, not 2]). Unfortunately, 2 pixels makes is look really ugly in Firefox. What's up with this? Any help would be much appreciated, as this has been driving me nuts! Gracias! Alright, for some reason, my site works fine in IE, but displays wierdly in Firefox and Opera. http://www.gamingfanboy.com Is there anything in my code that could be causing the display problems in Firefox/Opera? Edit: Just in case you were wondering, no, those aren't the final colors. I was just looking for some contrast. Hi im creating a website for a friend and although when i look at the site it looks fine in chrome but out of position in IE. however on my friends computer it is out of line on IE, FF and chrome. the problem is a img used as the background within a div container is showing out side the body container if you get what i mean. here are some links to images from my comp so you can see. just put http:// in front Chrome: i880.photobucket.com/albums/ac2/Kelenved/untitled.jpg IE: i880.photobucket.com/albums/ac2/Kelenved/untitled-2.jpg hope you can help out with this thanks in advance. Alright... i am creating a simple website and because of the way the site is to be created, I am using position: relative. However I'm trying to get the links on the left and right of an image to go under part of the image... In IE it works fine... in Opera, NS, and FF it doesn't. Is there something I need to add to my css to get it to work properly... CSS: Quote: td.homeleft {position:relative; top:50px; left:50px; font-size:14px; } td.homeright {position:relative; top:50px; right:30px; font-size:14px; } HTML Code: <html> <head> <link rel="stylesheet" href="lolli.css" type="text/css"> <title>UF Lollicup!</title> </head> <body bgcolor="fdf066"> <table align="center"> <tr> <td class="homeleft"> <center>Menu<br><br> Shop Now<br><br> What's New<br><br> Promos</center> </td> <td> <img src="images/homepageflower.gif"> </td> <td class="homeright"> <center>Links<br><br> Feeback<br><br> Newsletter<br><br> Pictures</center> </td> </tr> <tr> <td colspan="3" align="center"> <img src="images/bar.gif"> </td> </tr> <tr> <td colspan="3" align="center"> Gainesville, Florida 352-505-3662 </td> </tr> </table> </body> </html> I know some of you don't like tables... sorry for using them. Here's the site I'm working on: Site in Progress Here's what the site should look like: http://www.crash-tech.com/Lollicup/images/main.jpg Also the blue bar at the bottom... I'm going to want to place text on top of that as well, so would use relative positioning again. If anyone can suggest a better way to do this, that would be great. Had also considered doing the main page in Flash or using the image and mapping links. Thanks in advance. Just when you think you have everything pixelperfect (even on IE6) IE7 drops by. In most browser the page works correctly, the colored blocks all have their roll-over. But something is different in IE7: it gets wrecked. Is it possible to have IE7 behave like IE6? That would be most convenient for me, but that's only a work around, not a solution. So a couple of similar pages: DO NOT QUOTE / PASTE PLEASE - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - http://www. insight-development.nl/matrix.html insight-development.nl/matrix-v2.html insight-development.nl/matrix-v3.html log in with test & test - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Please have a look with me: (in the xml/html files, the css files are the same) version2 is similar to the first, except I have only 1 column filled. version3 is similar to the first, except I have only 2 columns filled. version2 is similar to the first, except I have only 1 column filled. What you see: there are some roll-overs in the first column except the first one on top ?? version2 is similar to the first, except I have only 1 column filled. What you see: there are some roll-overs in the first column except the first four on top ?? I think it might be some repeating/stacking in positioning, but to me: it seems like (not to shabby but somewhat) proper css code? NOPE IT'S A VISIBILITY ISSUE See next post... Any idea why this error ONLY in IE7 occurs? And how to solve it?? Hello, I am having some trouble with the position of 2 DIV's. They look fine on my computer but aren't in the same position on IE and other peoples computers. The following is how it looks on FireFox on my computer and how it SHOULD look for everyone: http://i53.tinypic.com/2h3bi8z.jpg This is how it looks on IE9 (Yes I am aware the menu isn't right either but i'll sort that out later): http://i55.tinypic.com/262sb5h.png The code for the 2 DIV's (I can post whole page CSS code if required): Code:
#shoppingCart{
background-image:url('images/shopping_cart_banner.jpg');
background-color:#000000;
background-repeat: no-repeat;
height:80px;
width:200px;
color:white;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
position:absolute;
top:300px;
left:915px;
}
#countdown{
background-image:url('images/countdown_banner.jpg');
background-color:#000000;
background-repeat: no-repeat;
height:80px;
width:200px;
color:white;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
position:absolute;
top:420px;
left:915px;
}
The HTML code for the page: 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>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>Home - Dine in</title>
<meta name="description" content="Homepage for Dine in" />
<meta name ="keywords" content="Dine, food" />
<link rel="stylesheet" type="text/css" href="divstyles.css" />
<link rel="stylesheet" type="text/css" href="formatstyles.css" />
<link rel="stylesheet" type="text/css" media="all" href="menu_style.css" />
</head>
<body class="body">
<div id="page_section">
<div id= "banner">
<img src="images/Banner.jpg" alt="The Dine In Banner" height="100%" width="100%" />
</div>
<div>
<ul id='menu'>
<li class="button"><a class='current' href='index.html' >Home</a></li>
<li class="button"><a href='aboutus.html' >About Us</a></li>
<li class="button"><a href='http://' >Menu</a></li>
<li class="button"><a href='http://' >Gallery</a></li>
<li class="button"><a href='http://' >Reviews</a></li>
<li class="button"><a href='booking.html' >Bookings</a></li>
<li class="button"><a href='http://' >Upcoming Events</a></li>
<li class="button"><a href='http://' >Contact Us</a></li>
<li class="button"><a href='http://' >Links</a></li>
</ul>
</div>
<div id="content">
<center><h1>The Dine In; A Cuisine like no other</h1></center>
<center><h4><u>Established August 2011</u></h4></center>
<center><img src="images/rest.jpg" alt="setting" title="setting" /></center>
<h2 class="margin">Whether alone, with family or with friends our purpose is to give you the <b>best</b> eating experience ever.</h2>
<p class="margin">Located on Bourke St, in the heart of Melbourne's CBD, TDN is a newly opened restaraunt with a World Class Cusisine and the finest dishes.
It combines relaxeded, glamourous atmosphere with exceptional hospitality.<br />
Our specialised Cheffs and Staff are trained to meet the requirements of our customers. At TDN it's our customers <i>needs</i> and <i>wants</i> that come first.
<center>We are open<u>7 days</u> a week and invite you during the following hours. </center>
<center><h3>Trading Hours:</h3></center>
<center>Mon 9:00am - 9:00pm</center>
<center>Tue 9:00am - 9:00pm</center>
<center>Wed 9:00am - 9:00pm</center>
<center>Thu 4:00pm - 10:30pm</center>
<center>Fri 4:00pm - 10:30pm</center>
<center>Sat 4:00pm - 10:30pm</center>
<center>Sun 11:00am - 5:30pm</center>
<center><h3>Thank you for visiting our Web Site, please continue browsing through what we have to offer to our customers</h3></center>
<div id="shoppingCart"></br></br>
<center>Your cart is currently empty.</center>
</div>
<div id="countdown"><br/><br/>
<script type="text/javascript" src="countdown.js"></script>
</div>
</div>
<div id= "footer">
<b>Disclaimer</b><br/>
This website is a student project that is intended to be used only for academic purposes. This page was created by Taner Serbest</p>
</div>
</div>
</body>
</html>
The URL for the site (if it helps or is needed): http://freddo.bf.rmit.edu.au/~s3286104/TheDineIn/index.html Any help is appreciated! Hello, I am having problems positioning my left menu on non IE browsers, The menu appears fine in IE, can anyone help please, I have attached my code Code:
body {
margin:20px;
background:#ffffff;
text-align:center;
padding:0;
}
#outer {
text-align:left;
border:0px solid #000000;
width:785px;
margin:auto;
}
#hdr {
height:30px;
background:#ffffff;
}
#bar {
height:25px;
background:#ffffff;
border:solid #000000;
border-width:1px 0 1px 0;
}
#bodyblock {
position:relative;
background: #fffff;
width:785px;
padding:0;
}
#l-col {
width:204px;
height:452px;
float:left;
background:#fff;
background-image:url(images/left.jpg);
background-repeat:no-repeat;
padding-bottom:10px;
}
#cont {
width:565px;
background:#ffffff;
border:solid #000000;
border-width:0 0 0 0px;
}
#middle {
width:5px;
float:left;
background:#fff;
}
#ftr {
height:25px;
background:#c0c0c0;
border:solid black;
border-width:1px 0 0 0;
margin:0;
}
Has anyone heard of Firefox 4 or Firefox 3.5 positioning a Div 3 pixels higher on a web page than all other A-Grade browsers? If you want to see what I mean, go to baampblue . asystechonline . com / ReconstructIndex.php. Sorry I could not insert a link. I'm a new member. I password protected this to keep bots from scanning it. The username is the word demo. The password is also the word demo. Look for "Carl Gohm" on the right side of the page, under "BAAMP Honors Lifetime Members". Click on the Carl Gohm link. A new rounded corner box will open up in the "Featured Projects" display with a picture and information about Carl. If you look at the new box in IE 8, Opera 11, Chrome 11, or Safari 5.0.5 the new box fits perfectly inside of the Featured Projects display. If you look at the new box in Firefox 4 or 3.5, you should notice that the new box is shifted up 3 pixels too high. The HTML and CSS validate with no errors on the W3C validators. I'm using jQuery to generate the new box for Carl Gohm. I have ruled out the jQuery as the cause of the problem by creating a minimal test case that doesn't involve jQuery. I tried using a clean version of Firefox from Spoon.net, because I thought maybe one of the Add-Ons in Firefox was causing the problem. That didn't make any difference. I tried viewing this on another computer that is running Firefox 4 on Windows XP, but the problem was still there. I used Firebug to disable and then re-enable each line of CSS one at a time to see if there was a CSS problem. I didn't notice an improvement. I just need to know if I am wasting my time trying to troubleshoot something that is not correctable. Thank you in advance for your time. I've been trying to solve this for many hours. I'm using CSS and transitional tables. I have content with a box of navigation right aligned within the content table. I need to have a gray line in the content area dividing sections. The width of that gray line is dependent on whehter that navigation box is there or not. I've tried two ways to create the line, a table set at 100% with a gray background color and a <hr> tag that is styled in the css. I thought the hr tag was working, but in NS7, the gray line writes over the navigation box. Here's the page: http://www.vma.org/paris/nci-intranet/work-life-services-coachin.html If I use a table width=100%, it starts working in NS7 and Firefox, but stops working in IE. As you can see from the page, the width of the gray line is dependent on the navigation box to the right. The navigation box is a right aligned table floating within the content box. Here's my <hr> definition in the css: hr { border: 0; color: #D5D5D5; background-color: #D5D5D5; height: 1px; text-align: left; padding: 0px; margin: 0px; } Any ideas? Its driving me crazy, I know there's gotta be a simple solution to having the line take up the same amount of space as the text does and no more. Thanks! Hi all, I am having major issues with positioning my footer, on IE it sits way down out of site, on Firefox it is perfect and on Safari it sits above the bottom of the screen, three totally different results! This is one of the last things that needs sorting, so please help if you can as I seem to have run out of talent! 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>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
<title>Welcome!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* mac hide \*/
html, body {height:100%}
/* end hide*/
body {
padding:0;
margin:0;
color: #000000;
}
#wrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
#header{
position:absolute;
top:0;
left:0;
bottom: 0;
width:100%;
height:210px;
border-top:0px solid #feffff;
border-bottom:0px solid #feffff;
overflow:hidden;
color: #000000;
}
#clearheader{height:240px;}/*needed to make room for header*/
* html #footer {/*only ie gets this style*/
\height:40px;/* for ie5 */
he\ight:38px;/* for ie6 */
}
#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 0px white;
}
#navlist li a {
color: #4E261B;
text-decoration: none;
font-family: palatino linotype, helvetica, sans-serif;
font-size: .90em;
line-height: 200%;
}
#content {
background-color: white;
height: 100%;
padding-bottom: 40px;
padding-left: 200px;
padding-top: 0px;
}
#footer {
width:100%;
clear:both;
border-top:0px solid #000;
background-color: #8ecce7;
color: #000000;
text-align:center;
position: bottom;
min-height: 100%;
}
#footerlist a
{
text-decoration: none;
color: #4E261B;
font-family: palatino linotype, helvetica, sans-serif;
font-size: 8pt;
}
p{
font-family: Palatino Linotype;
color: #336699;
font-size: 12pt;
text-decoration: none
}
p2{
font-family: Palatino Linotype;
color: #336699;
font-size: 8pt;
text-decoration: none
}
a{
font-family: Tempus Sans ITC;
color: #4E261B;
font-weight: bold;
font-size: 14pt;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<img border="0" src="images/Banner_flat.jpg" alt="Banner" width="100%" height="210" align="left" />
</div>
<div id="clearheader"></div>
<div style="position: absolute; width: 169px; height: 243px; z-index: 1; left: 3px; top: 217px" id="layer1">
<img border="0" src="images/bridetablet1.bmp" alt="Menu" width="190" height="302" /></div>
<div style="position: absolute; width: 169px; height: 243px; z-index: 2; left: 14px; top: 248px" id="layer2">
<div id="navcontainer"></div>
<ul id="navlist">
<li><a href="hello" class="c2">Home</a></li>
<li><a href="About%20Us" class="c2">About Us</a></li>
<li><a href="User%20Register" class="c2">User Register</a></li>
<li><a href="User%20Log-In" class="c2">User Log-In</a></li>
<li><a href="Supplier%20Log-In" class="c2">Supplier Log-In</a></li>
<li><a href="Join" class="c2">Join</a></li>
</ul>
</div>
<div id="content">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<div id="footer">
<p2>
<a href="test1.htm" title="Terms and Conditions" style="text-decoration: none"><font size="2">
Terms and Conditions |</a><font size="2">
</font>
<a href="test2.htm" title="Advertise" style="text-decoration: none"><font size="2">
Advertise |</font></a><font size="2">
</font>
<a href="test3.htm" title="FAQ's |" style="text-decoration: none"><font size="2">
FAQ's |</font></a><font size="2">
</font>
<a href="test1.htm" title="Site Map |" style="text-decoration: none"><font size="2">
Site Map |</font></a><font size="2">
</font>
<a href="test1.htm" title="Wedding Hair |" style="text-decoration: none"><font size="2">
Wedding Hair |</font></a><font size="2">
</font>
<a href="test1.htm" title="Wedding Makeup |" style="text-decoration: none"><font size="2">
Wedding Makeup |</font></a><font size="2">
</font>
<a href="test1.htm" title="Wedding Beautician" style="text-decoration: none"><font size="2">
Wedding Beautician
</font></a>
</font>
</p2>
</wrapper>
</div>
</div>
</body>
</html>
Thanks, G I'm trying to use CSS to format a gallery component of a CMS I'm building. At the moment I'm failing miserably! You can see an example of the page I'm trying to sort out at http://www.geoffsoper.co.uk/albums/181_highlights.htm but there's a simplified test case at http://www.geoffsoper.co.uk/test_bed/index.htm which should be self-explanatory. The first problem is that I want the text of element 1 to start a new line when it reaches the drop down menu of element 2 but at the moment element 2 is displaced downwards. Element 1 and 2 should have their tops level. Secondly element 3 is taking its vertical cue from the bottom of the menu div due to the clear:left. Instead I want it to be immediately below elements 2 and 3 and then to have the images and descriptions directly below element 3. Finally I don't want the text of the description to flow under the image, I realise I could put a big margin-left value on the description divs to clear the image but I don't really want to rely on knowing the size of the image. If anyone can show me how I should be curing these issues I'd be very grateful! Thanks, Geoff Hi guys, when I try to create layers (AP divs) with Dreamweaver, everything looks great, but when I preview that in a browser, the layers change their positions. I am very frustrated since I've been trying to figure out why for almost 2 days, and I can't. Please help me! Check out this screenshot: http://www.theoutsourcingcompany.com/tryarg/images/proof1.jpg This is the code: 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
<!--
#maincontent {
left:186px;
top:27px;
width:80%;
height:608px;
z-index:1;
margin: 0 auto;
background-repeat: no-repeat;
background-position: center center;
position: relative;
text-align: center;
}
#Name {
position:absolute;
left:372px;
top:95px;
z-index:1;
}
#Email {
position:absolute;
left:372px;
top:140px;
z-index:1;
}
#Phone {
position:absolute;
left:372px;
top:185px;
z-index:1;
}
.fontfields {
font-size: 24px;
}
-->
</style>
</head>
<body>
<div id="maincontent">
<form>
<div id="Name">
<input name="Name" type="text" class="fontfields" id="Name2" />
</div>
<div id="Email">
<input name="Name" type="text" class="fontfields" id="Email2" />
</div>
<div id="Phone">
<input name="Name" type="text" class="fontfields" id="Phone2" />
</div>
<img src="http://www.theoutsourcingcompany.com/tryarg/images/form.jpg" width="650" height="608" />
</form>
</div>
</body>
</html>
If you know what the problem is, please help me. I am really confused with absolute, relative, fixed, and static positioning. I understand the concepts but I can't position the layers wherever I want. Thank you! Hi DevShed CSSers! So I've made the foray into Blogging with MovableType, which is great, and I'm very excited about the potential for my sites. I'm having an issue though. I want to configure the templates so that the basic layout/navigation is all the same, even on the archive pages. I set up a two column layout, and the second column seems to always wrap underneath the post. Here's an example... http://blog.identitytheftsecrets.co...tity_theft.html How can I fix this so that it sits where it should on the right side? If you need to see the template code to offer help, let me know. I'll be happy to post. Please keep in mind that I'm new at this too, and am really trying to learn, but am very brand new to CSS. Thanks so much in advance for any help! So I have a testing site located at: http://www.ga-lan-ga.com/testing If you look at that first page in Mozilla Firefox everything looks fine, like it should look. Then if you open it in Internet Explorer (please note I am only testing with Internet Explorer 7.0, and don't care about the problems with lower versions, I know there are some), you will notice in the middle box that it is slightly overtop the top green header. Anyways, here is the relevant code for you. Code:
#main_middle
{
position: relative;
top: -12px;
right: 0px;
height: 53px;
width: 894px;
background-image: url(/testing/images/background_middle.png);
background-repeat: repeat-y;
}
Now I understand that the reason it is overlapping in IE is because of my wonderful little Firefox fix of giving top a negative value. However if I give it a 0 value, it does look fine in IE, however in Firefox there is a space then in between the background images. Any help in getting it to look like it does in Firefox in both browsers would be much appreciated. Hi... I'm a complete noob at this hand coding thing... this is my first site, and my page and css are very simple... Everything looks great in FF, Chrome, Safari, but the positions is really wacky in ie 5-8. I'm baning my head against the wall for some time now and any help would be so appreciated! the page is tribal miami art show dot com. Thank you! Hello i wondered if anyone could help me. My first problem is that the footer section is ok in internet explorer 6, in ie7 it is slightly higher than it should be and in firefix the copyright text is underneath the footer bar. The navigation bar is great in ie6+7 but in firefox it doesnt line up properly. And lastly on the quote page i am having all sorts of trouble in all browsers. In ie6 the right hand column is underneath the form and to the left. In firefox the coumn is in the right place but it is not showing the colour in the main column and the footer is to the left as well. The link to the site is http://www.alrwritingservices.co.uk and the css is http://www.alrwritingservices.co.uk/main.css http://www.alrwritingservices.co.uk/form.css Can anyone help me please as i am absolute puzzled at the moment. Many thanks in advance. After a lot of effort, I'm making things worse, and not better! The page in question is he here. I had everything lined up except for the column ofthree alternate image views to the right of the primary image. While trying to get these to align vertically with the bottom of the primary image, I have broken the layout for the whole page... What's now broken: #content is no longer aligning with the top of the left nav (margin-top:40px) as mentioned above, I need the column with the three smaller images to align with the bottom of the larger image, floating up and down based upon the larger image's height. the "next >" link is not vertically aligning properly with the bottom of the image in FF. And, of course, I need to get the whole thing working in ie. Before coding, I laid things out semantically, planning to float:left the nav and content boxes within the centered #main div. This was working before I broke it. :-( I'm very new at this, and am doing my best! But I feel like I might go insane at the moment... Thanks, in advance, for your help. -BBD Hi all, Im assuming I have a pretty basic problem, but with me being semi new to css Im struggling. Im trying to make my main white block in the centre of the page extend to the bottom of the page (commonly used I know) but at the moment there is a gap, I want it to extend to the bottom regardless of how much information there is. Also I added a navigation bar which is fine in 1024 resolution but in other resolutions it moves out of position. Here is the css I have so far: #mainarea { position:static; top:0px; margin-left: auto; margin-right: auto; width:800px; height:600px; background-color:#ffffff; } #navi { position:absolute; top:153px; left:106px; width:790px; height:40px; background-color:#000000; } Thanks in advance http://www.ror.twisted-delusions.net/flip2/ I can't seem to get those words of testing to stay where they should be which is above the footer. Why is the footer div going up so high? What I currently have is Code: <div id="main"> Site content comes here </div> <div id="bottomLinks"> <div style="float: left">A link</div> <div style="float: right">Copyright notification</div> </div> Code:
#bottomLinks {
padding: 10px 0px 10px 0px;
margin: 0;
width: 750px;
position: absolute;
bottom: 10px;
}
#main {
background-color: #FFFFFF;
width: 760px;
font-family: Arial;
font-size: 12px;
padding: 30px 0px 0px 40px;
}
As you can see, I'm trying to put the link & copyright notification at the bottom of the page. My problem occures when the site content is so long that there will be a scrollbar. Opera will handle this the way I want it to, meaning first the content and then at the very bottom of the page there will be the link and the notification. However Firefox and Konqueror doesn't work this way. They both put the bottomLinks 10 pixles top from the VISIBLE part of the page, overlapping the actual content. If the content is long enough, it could mean that bottomLinks is in the middle of the page. Any ideas how to fix this? |
|||||||