I was wondering if anyone might be able to help as I'm stuck. I'm trying to convert a site I've already created using tables and an iframe to resolve search engine issues and I am experiencing problems trying to recreate the layout using CSS.

There are a number of issues relating to various browsers (IE, Firefox, Mozilla, Safari, Opera) both on Mac and PC not consistently displaying what I have tried to put together.

Below I have provided a link to an image file showing the layouts I'm trying to achieve:

Version 1:
http://www.ridgedale.euro1net.com/te.../testimage.jpg

Version 2:
http://www.ridgedale.euro1net.com/te...testimage2.jpg

I've also provided a link to the test page below:

http://www.ridgedale.euro1net.com/test8/test.html

The points I'm having problems with in particular are:

1) I can't position the footer elements correctly - the various browsers all implement what I've done in a different way!!!!

2) There is unwanted space appearing either side of the vertical white lines in the footer block.

3) Using

<div id="xxxx"></div>

in the manner I have to position the various elements has left me no apparent way of controlling the section backgrounds (e.g. the top row of pics could be masthead or banner as an ID and then I could specify a background colour or image.)

4) Ideally I'd like to make the content area to display scrollable content that is search engine friendly. I did this with an iframe previously in the tables based site but the search engines don't pick up any of the content! Is it possible to achieve this using CSS?

I've providing the style sheet code (- which I appreciate may not be very efficiently coded!) below:

#Pic1 {
position: absolute;
top: 0px;
left: 0px;
width: 157px;
background-color: #0033FF
}

#Pic2 {
position: absolute;
top: 0px;
left: 158px;
width: 80px;
background-color: #FF3333
}

#Pic3 {
position: absolute;
top: 0px;
left: 239px;
width: 80px;
background-color: #FF3366
}

#Pic4 {
position: absolute;
top: 0px;
left: 320px;
width: 80px;
background-color: #FF3333
}

#Pic5 {
position: absolute;
top: 0px;
left: 401px;
width: 80px;
background-color: #FF3366
}

#Pic6 {
position: absolute;
top: 0px;
left: 482px;
width: 80px;
background-color: #FF3333
}

#Pic7 {
position: absolute;
top: 0px;
left: 563px;
width: 80px;
background-color: #FF3366
}

#Pic8 {
position: absolute;
top: 0px;
left: 644px;
width: 80px;
background-color: #FF3333
}


#navPic1 {
position: absolute;
top: 125px;
left: 0px;
width: 75px;
background-color: #0033FF
}

#navBtn1 {
position: absolute;
top: 126px;
left: 76px;
width: 81px;
background-color: #333333
}

#navBtn2 {
position: absolute;
top: 126px;
left: 158px;
width: 86px;
background-color: #666666
}

#navBtn3 {
position: absolute;
top: 126px;
left: 245px;
width: 65px;
background-color: #333333
}

#navBtn4 {
position: absolute;
top: 126px;
left: 311px;
width: 94px;
background-color: #666666
}

#navBtn5 {
position: absolute;
top: 126px;
left: 406px;
width: 96px;
background-color: #333333
}

#navBtn6 {
position: absolute;
top: 126px;
left: 503px;
width: 59px;
background-color: #666666
}

#navBtn7 {
position: absolute;
top: 126px;
left: 563px;
width: 65px;
background-color: #333333
}

#navBtn8 {
position: absolute;
top: 126px;
left: 629px;
width: 81px;
background-color: #666666
}


#bdyPic1 {
position: absolute;
top: 157px;
left: 0px;
width: 157px;
background-color: #0033FF
}

#bdyStrip {
position: absolute;
top: 157px;
left: 158px;
width: 110px;
background-color: #003399
}

#bdyText {
position: absolute;
top: 157px;
left: 269px;
width: 456px;
background-color: #0033FF
}


#line01 {
margin: 0px;
width: 100%
}

#ftrBlk1 {
position: absolute;
left: 0px;
bottom: 0px;
height: 30px;
width: 100%;
background-color: #333333;
}

Any help would be greatly appreciated, thanks.

get rid of all that position absolute stuff for a start

for a scrolling div,

#scroll_div {
width:300px;
height:300px;
overflow: auto;
}

Will give you a 300x300 container with a vertical scrollbar

Thanks for your reply Chris. I've implemented what you said (literally removed all position: absolute; entries and added the overflow: auto; entry) and have got the following result:

http://www.ridgedale.euro1net.com/test8/test3.html

As you can see from this remove the position: absolute; entries from the style.css file completely breaks the positioning of the <div> elements. The overflow: auto; entry does however seem to work generally.

Below I have listed how what I've got now is displayed in various browsers I've tested:


Browser Group A:

OS Browsers
Mac OS9 Netscape 6.2 & 7.1
Mac OSX Netscape 7.1 / Mozilla 1.7.13 / iCab 3.0beta382 / Safari 2.0.4 / Firefox 1.5.0.5 / Camino 1.0.2
WinXP Pro Firefox 1.0.6

All the <div> elements are now stacked vertically, one after the other on the page ranged left and there is an unwanted, approximate 4mm white border around the page elements.

The overflow: auto; element is generally handled correctly apart from the fact that the vertical space above and below the inserted text varies from browser to browser.

There are still unwanted spaces either side of the vertical white lines in the footer element.

Browser Group B:

OS Browsers
Mac OS9 Opera 5 & 6.0.3

Same as Group A except that the overflow: auto entry is not supported. The text flows straight down beyond the box area and there is no scroll bar.

Browser Group C:

OS Browsers
Mac OS9 Netscape 4.77

Same as Group A as well as not supporting the overflow: auto entry with the text flowing straight down beyond the box area and there being no scroll bar. Additionally extra, unwanted white spaces appear between each of the <div> elements.

Browser Group D:

OS Browsers
WinXP Pro Opera 9.00

Same as Group A except that the <div id="bdyPic1"> and <div id="bdyStrip"> elements have been crunched vertically into narrow horizontal lines.

Browser Group E:

OS Browsers
WinXP Pro Internet Explorer 6.0

Same as Group A except that there is a bigger white border along the top edge of the page and a huge white border along the bottom edge.

Browser Group F:

OS Browsers
Mac OSX Opera 7.54u1

Same as Group A except that there is a white space both above and below the <div id="bdyText"> element.

Browser Group G:

OS Browsers
Mac OSX Internet Explorer 5.2


Same as Group A except that the overflow: auto; element does not display correctly. Namely, there appear both horizontal (unwanted) and vertical scroll bars on the <div id="bdyText"> element. On top of this the content is exceeding the width as well as the height of the <div> element which is what is forcing the appearance of the horizontal scrll bar, and the content is not excepting the margin styling from style3.css.

So, if I assume Group A is the starting point, my question remains how do I achieve the layouts I gave with the 2 .jpg examples in my original posting? Also, how will I be able to get the various IE and Opera browsers to display the page correctly?

Thanks for your patience. Any help is appreciated.

As I have no idea what your original jpgs looked like (they 404 currently) I couldn't say, but looking at it I would say you need to learn about floats and the difference between block and inline elements.
Why does each image need an individual <div> defined? You seem to be stuck in the "designing layout tables using CSS idea"

put the image back on-line so we can see what the design should be please.

Chris,

Apologies I specified the incorrect file names (Doh!). Here are the working links:

Version 1:
http://www.ridgedale.euro1net.com/te...s/testsite.jpg

Version 2:
http://www.ridgedale.euro1net.com/te.../testsite2.jpg

I'm sorry but I don't appear to be able to attach files to this reply as I get a message saying I've exceeded my quota by 7.5kb each of the 2 files are 60kb or less even though I've never posted any attachments before.

Hopefully you'll be able to downlaod the .jpgs from the links in this post.

Thanks again for your help.

ridgedale: you're still trying to use absolute positioning (top and left attributes) even though you don't have any explicitly defined.

What you should be doing, as chrishirst pointed out, is using floats (specifically float: left) and a select few containing divs to place your content accordingly.

Start with the top section. Get it all positioned. Once you figure out the top section, the middle and bottom will come.

If you want a real-world example, check out the Search Engine Friendly Layouts link in my signature. The menu, specifically, is what you're after. Go ahead, steal the code from it. It's all good.

Thanks for your help, Adam Web Design. I'll try what you've suggested and post how I get on.
So far I've got the initial row positioned and am working on the rest of the layout.

Thanks again.

One thing though, when we say 'position' an element, that does not mean we are suggesting adding a position: xxxx to each element. That is simply not necessary.

Right, this is where I have got to so far:

http://www.ridgedale.euro1net.com/test8/test4b.html

below is the link to what I'm trying to achieve:

http://www.ridgedale.euro1net.com/te...s/testsite.jpg

I need to say straight away that this page is breaking in all browsers!! But is closest to the mark using Safari on the Mac (- probably not the best starting point to use as a browser I'm beginning to think! Maybe better to start with Firefox.)

The problems I am having appear to be:

1) Can't seem to get the row of grey buttons (<div id="navStripRight">) to sit next to (i.e. to the right of) the short green block and white vertical rule directly above it - how do I resolve this?

2) When I resize the browser window to a narrow size the section containing Block02.jpg of <div id="ftrBlk1"> gets pushed down a row - how can I rectify this?

3) I'm assuming the green block section (<div id="baseRight">) which should be sitting to the right of the section (<div id="baseMiddle">) will be resolved using the sanme technique which resolves issue 1) ...

Thanks again for your patience, guys.

Below is the style sheet so far:

body {
	margin:  0;
	padding:  0;
}

.text { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
margin-left: 25px; 
margin-right: 25px; 
font-size: 14px; 
color: #333333 
}


#FWNcontainer {
width: 100%;
background-color: #336699
}

#headerContent {
width: 100%;
background-color: #000000
}

#imageStrip {
float: left;
width: 725px;
}

#navContent {
width: 100%;
height: 32px;
background-color: #330033;
clear: both
}

#navStrip{
width: 711px;
float: left
}

#navStripLeft {
width: 76px;
float: left
}

#navStripRight {
width: 635px;
float: right;
clear: both
}

#bdyContent {
width: 100%;
height: 300px;
background-color: #003333
}

#bdyStrip {
float: left;
width: 725px;
height: 300px;
overflow: auto
}

#bdyText {
float: right;
width: 456px;
height: 300px;
overflow: auto;
background-color: #0033FF;
clear: both
}


#footerContent {
width: 100%;
background-color: #000000
}

#ftrBlk1 {
bottom: 0px;
height: 32px;
width: 100%;
background-color: #333333;
clear: both
}

#baseContent {
width: 100%;
height: 100%;
background-color: #660000
}

#baseMiddle {
float: left;
width: 725px
}

#baseRight {
float: right;
width: 456px;
background-color: #0033FF;
clear: both
}

Ok, for one thing it's not going to work to have float: right (or left) and then put clear:both in the rules for that same element. Clear your floats separately, there are a couple of methods you can use:

This is one method:
Clearing a float container without source markup

This is another:
.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}
Then you add <br class="brclear" /> following the floated element.

In FF, that center scrolling section winds up with TWO scroll bars.. not good at all.

You might also want to read thru this float tutorial:
Floatutorial: Step by step CSS float tutorial

A belated thankyou for that, LadynRed. Apologies for the delay in responding - over a month without Internet access has been a trial to say the least!

I will get down to some reading to get a better idea of what I should be doing.

Thanks again.