CSS - Ff & Ie Positioning Assistance

Website: www.devthor.net/sara/index.php
CSS:
www.devthor.net/sara/css/fineart.css

Ok, here is the problem. It is a pretty basic site so I wasn't expecting many problems (well, maybe I should have, they always seem to crop up), and everything lays out properly except my menu bar. The goal is to have the text sit on top of the image, and the white bar that appears on mouse-over to appear on top of the image (preferably within 1 px accuracy so that the brown border still remains untouched by the opacity, picky, yeah, but I like the look better).

So I was going to start playing with CSS hacks to get the positioning exactly right on all the browsers when I noticed something. Firefox on OS X and Firefox on a PC displayed the menu in a different location. I believe that this has to do with the default font sizes on the respective platform. But as a side effect, it messes up my absolute positioning efforts on the menu since the different sized text takes up different amounts of space.

So I then attempted to go back to relative spacing since the font size would become a mute point if the page auto adjusts, however for some reason with the <dl><dd><dt><li> menu style I use, the text I place inside the menu div does not cause the div bounding box to expand. Thus relative positioning ends up placing the menu div inside the top image div. (More accurately it places the text from the menu div inside the image box while the actual div bounding box seems to have a height of 0, and thus is invisible.

Basically I am looking preferable for a fix to the relative positioning issue. If a fix cannot be found for this, maybe just a fix for the font size messing up my layout issue.

I am at the end of my means for figuring it out having spent the last 2 days searching for a solution. So any help would be tremendously appreciated.

Thanks in advance,
Devthor

P.S. Sorry for the novel length post. I just figured some background as to what I have tried might be helpful.

Please look at this layout as provided by my graphic designer:

http://hometown.tmhdesign.com/default.jpg

Now look at my attempt to achieve the same

http://hometown.tmhdesign.com

I am a bit challenged at the right column and how to lay it out. She put a fixed height gradient background in the right div and then placed yet another div on top of that one. THe issue as you can see is if the content on the left exceeds the content on the right the design breaks up (so to speak). I'm really curious to get some feedback from the experts...

Hi,

I am having some major problems making all the <div> tags place the content in the correct places.

The logo (yes its poort quality on purpose, its just for testing ) needs to be centered and above the left and right vertical menus.

The block of "Text" needs to be below the logo but contained between the two vertical menus.

and the footer needs to be in line with the text but move up and down the page depending how much text is present.

The site is: http://www.explosiveracing.net/test/header.html

Could anyone be of assistance?

Thanks

Please visit this page -

http://www.brooksidetransmission.com

Put your mouse over the "Services" link to reveal a sub menu.

In FF it works fine in that you can access each of the links in the sub menu.

In IE7 though when you move the mouse around the sub menu links the who sub menu disappears.

Some background on this issue is that I am trying to incorporate two 3rd party resources into one, with one being the drop down menu, the other being a box with rounded corners.

Somewhere in my combining the two messed up the :hover for IE7

Any help would be appreciated.

Tom

I am having consistent alignment issues with IE7. I am uncertain as to what the issue could be. Any help, assistance or a link to some reference would be greatly appreciated.

1) . The line at the top of the screen and the tabs do not line up
properly. The line transects the buttons.
standardizedsupplements{dot}com


2) Image and Text are not aligned on same line:
standardizedsupplements.com/tremorsure.html
standardizedsupplements.com/purchase_tremorsure.html

3) Gif/Arrow to right side panel list ( <li> ) is not consistent showing up on all lists.
standardizedsupplements.com/contact-us.html


4) In the FAQs, at the very top of the page, the numbers and the text overlap, when there are double digits.
standardizedsupplements.com/faq.html

Please look at this layout

Layout Example

In IE7 there is a gap between the footer and upper divs that I am not sure what is causing.

The other issue I would appreciate help with is the #right div element. When the #content div has a higher height I want the #right div element to stretch with it (and vice versa). Any help would be appreciated.

Tom

I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values):

It needs to be sticked to fit after content of 4 column DIV's like it is in example.

http://www.split.info/dev/less-content/
http://www.split.info/dev/more-content/

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF;  top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966;  position: absolute;  top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="contentPane">Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
	</div>
	<div id="leftPane">Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
	</div>
	<div id="rightPane">Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
	</div>
	<div id="rightPane2">Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
	</div>
</div>
<div id="headwide">
	<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>

Content from above 4 column div's need to push footer DIV below (after them)!

Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns).

Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer...

So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx!

Echo

I need help laying out my page, and I can't seem to get this CSS stuff right.

My page has a logo at the top left, a menu at the top right. Below the logo on the left, I have an image. To the right of that I have another image. The bottom of those two images need to line up.

Below those 2 images, I have 3 smaller images I want to display from left to right. I tried to set up DIV blocks, and used CSS to position them. When it lays out on my page, and I scrunch the brower small, the images on the right side overlap and cover the images on the left. Also, the images on the bottom extend below the bottom of the browser, but I don't get a scroll bar to see them.

I am told tables are not the way to do it anymore. I am not a web developer, so I need some help, pretty please.

Hi all.. I just stumbled onto this site via a google search. I'm having a problem with some "div" work and postitioning of a graphic. I'm working on a site and have decided to do all the positioning via CSS. The positioning shows fine in Firefox but the last portion is shifted down 10 or so pixels in Internet Explorer.

Here's a quick show of the error:

URL

Here's the HTML with CSS below:

Code:

<div id="Table_01">
	<div id="hdr-main_">
		<img id="hdr_main" src="images/hdr_main.jpg" width="557" height="161" alt="" />
	</div>
	<div id="hdr-mnu-left_">
		<img id="hdr_mnu_left" src="images/hdr_mnu_left.jpg" width="5" height="20" alt="" />
	</div>
	<div id="hdr-mnu-bg_">
		<img id="hdr_mnu_bg" src="images/hdr_mnu_bg.jpg" width="547" height="20" alt="" />
	</div>
	<div id="hdr-mnu-right_">
		<img id="hdr_mnu_right" src="images/hdr_mnu_right.jpg" width="5" height="20" alt="" />
	</div>
	<div id="hdr-mnu-bottom_">
		<img id="hdr_mnu_bottom" src="images/hdr_mnu_bottom.jpg" width="557" height="5" alt="" />
	</div>
</div>
</body>
</html>

I've also pasted the CSS code:

Code:

#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:768px;
}

#hdr-main_ {
	position:absolute;
	left:228px;
	top:41px;
	width:557px;
	height:161px;
}

#hdr-mnu-left_ {
	position:absolute;
	left:228px;
	top:202px;
	width:5px;
	height:20px;
}

#hdr-mnu-bg_ {
	position:absolute;
	left:233px;
	top:202px;
	width:547px;
	height:20px;
}

#hdr-mnu-right_ {
	position:absolute;
	left:780px;
	top:202px;
	width:5px;
	height:20px;
}

#hdr-mnu-bottom_ {
	position:absolute;
	left:228px;
	top:222px;
	width:557px;
	height:5px;
	
}

Does anyone know why my graphic is turning out the way it is in IE and not in Firefox? This is my first serious attempt at positioning with CSS.. so bear with me

Thanks all...

Jason

CSS is very new to me so if someone can help me with my problem i would very much appreciate it.

I am using a background image that is 1024 x 768px. I have positioned this using...

Code:

body
{
background-color:#000000;
background-image:url('images/homebg.jpg');
background-repeat:no-repeat;
background-position:center top;
} 

As i am new to css i am using tables to position my content over the top of the background image. If the browser is adjusted in size the content appears to be going over the edge of the background image instead of staying with in it.

is there any way i can lock the 2 (background image and content) in position so that when the browser is made smaller or the site is viewed in different resolutions it will remain together without the content going over the edge of the background.

Or am i doing this wrong. I have read about wrappers and such but i don't really understand them.

An example of what i am trying to achieve is at www.blue-leaf.co.uk

If you view the following site in Firefox

http://mtm324php.info/nasdaq.xml

you can see this...

NASDAQ 100
Current quotes
then the date

because this is the order of the data in the XML document...

Well let's suppose I want it like this...

http://mtm324php.info/nasdaq.bmp

with the date on the very top.

How would I do this in CSS? It has to be in CSS as that is the requirement.

Thank you.

stupid question

I have a three column layout I picked up from the web here and there and I am trying to be clever and of course, since I am not a CSS pro...I am blowing it!

the css I am messing with is as follows:

container holds the three columns and the header and footer.

in the header section..which is called #top, I have an image which is the logo for the page. The top is 95 px high. what I wanted to do was split the TOP div into two sections, with the second one starting at 340px from the left and go about 250 px across. naturally, I tried to use:


#new_section
{
margin-left: 323px;
margin-right: 0px;
margin-top:55px;---bottom of #TOP div---
padding:0px 0px 40px 0px;
border-bottom:2px solid #D7C8AC;
background-color:#E2DCDC;
}

all the variations I used either worked in IE and not NS or vice versa.

I know it is just a simple positioning issue I am overlooking.

any help would be appreciated greatly.

thanks!

jpm226@comcast.net
**************************
#container
{
width:auto;
margin:0px 0px 0px 0px;
background-color:transparent;
color: #333;
line-height: 130%;
background-image:url(bg.gif);
background-position:left;
background-repeat:repeat-y;

}

#top
{

padding:0px;
height:95px;
border-bottom:2px solid #E2DCDC;
background-color:#F5F5F5;
background-image:url(header.gif);
background-repeat:no-repeat;
background-position:left;
}


.text{
padding:4px;
fontalatino linotype;
color:#000;
text-align:justify;
}

#leftnav
{
float: left;
width: 322px;
margin-top:0px;
padding:0px;

}

#rightnav
{
float: right;
width: 214px;
margin-top:149px;
margin-right:2px;
padding:0px;
background-color:transparent;
/*border-left:1px solid green;
border-right:1px solid green;*/
}

.news
{

margin: 0px 10px 0px 10px;
background-color:transparent;
/*height:235px;*/
border: 2px solid #fff;
}


#image
{
margin-left: 323px;
margin-right: 0px;
margin-top:0px;
padding:0px 0px 96px 0px;
border-bottom:2px solid #D7C8AC;
background-color:#E2DCDC;
background-image:url(desk.gif);
background-position:right;
background-repeat:no-repeat;

}



#content
{
margin-left:323px;
margin-right: 216px;
margin-top:0px;
padding:10px 0px 30px 0px;
max-width: 36em;
border-left:1px solid red;
border-right:1px solid red;
background-color:transparent;
}

.content2 {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:120px;
margin:20px 8px 10px 8px;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
background-color:#F5F5F5;
padding:10px;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */

}
#footer
{
clear: both;
margin: 0;
padding:0px;
color: #333;
border-top: 1px solid #fff;
background-color:#EEE8E8;

}

I have a select menu that I want to sit on the bottom of the page regardless of the length of the page. How can this be achieved? Height of menu is 235px and width is 150px.

This is a snippet of what I have in my css:
Code:

#page-body {
        width:100%;
        background:#000 url(bg_night.jpg) bottom left repeat-x scroll;
        margin:0;
        padding:0 0 125px 0;
        border:1px solid red;
        border-top:33px solid #cfad34;
        color:#fff;
        clear:both;
}

The css above works great but now I want to include an image in the lower left-hand corner of the page-body also.

So while I have something like the following:

Code:

<html>
 <body>
  <div id="page-body>
    .....
   </div> 
  </body>
 </html>

I am hoping to create a class where I can position this second image. I don't want to use absolute positioning because the page body will increase in height size based on the growth on the content inside.

Any suggestions?

Thanks in Advance.

Hello friends,

Need some help with CSS layer positioning, which for the last couple of days has been the cause of much frustration. I am updating my site, and am converting some of my code to be more semantic. The test page, which looks 'right' is here.

The semantic version, which now places the footer and sidebar within their own divs is here (I have removed the javascript and other text to keep things as simple as possible):

The problems I am experiencing:
The side bar, shaded blue for clarity is now 'outside the box', see the first link to see how it should be; There is a gap between the bottom of the extra div and the top of the footer div; The positioning of the sidebar is affecting the header/nav - try mousing over 'contact';
In short, I am trying to convert my existing layout to this, but can't seem to get there.


Here is what I am striving for:

Code:

|------------------------------------
|              Navigation            |
|------------------------------------
|Breadcrumbs <p>                     |
-------------------------------------
|                        |           |
|        Content         | Sidebar   |
|                        |           |
-------------------------------------
|             Optional Extra         |
-------------------------------------
|                      Footer        |
-------------------------------------

Any help much appreciated!