Styling problem

dhossai · #1 Nov 9th, 2007, 21:06

Hi Fellows!

I am here again and I am sure someone will be able to help me as alawys does. I have a page link at http://www.bangladeshilivingabroad.com/111/index.html and if you see at the bottom before footer I have a space where I am planning to get some AD. I want that red rectangle to divide into 5/6 small image box so whenever i get the ad I will be able to incorporate. Could someone pls tel me the code for that. Below is my html and CSS for this ....

PHP: Select all


html;
<div id="bottomad" align="center"></div>

And CSS:
#bottomad{
 float:center; 
 width:800px; 
 margin:0px;
 height:80px;
 border-right:solid 1px #FF3300;
 border-left:solid 1px #FF3300;
 border-top:solid 1px #FF3300;
 border-bottom:solid 1px #FF3300;
}

Stuart · #2 Nov 9th, 2007, 21:19

Red rectangle near the footer? I see four red rectangles beneath the navigation. Is that what you mean?

AdRock · #3 Nov 9th, 2007, 21:24

also you can't use float:center;

it has to be left or right

Stuart · #4 Nov 9th, 2007, 21:31

Oh crap! Didn't notice the float:center; That's illegal in CSS! Use text-align:center; instead...

karinne · #5 Nov 10th, 2007, 00:21

It's not that float: center is illegal ... it's that it doesn't exist

dhossai · #6 Nov 10th, 2007, 00:34

Hi Guys!
Thanks for your reply but I am talking about the one just top of my footer that big ractangle across with red border. Again if I don't use the float:center my footer move to right?

Marc · #7 Nov 10th, 2007, 10:24

I dont understand you but if you want something centered.. Add margin:0 auto; to it..

dhossai · #8 Nov 10th, 2007, 11:55

Hi Marc
I don't know where is the confusion. If you look at the link at http://www.bangladeshilivingabroad.com/111/index.html you will see a red rectangle just top of footer which is center now from left to right. I want that to be divided in to 5/6 image holder so I can add advertising later on. I want to know how can I do that. I hope I made this clear now.

Marc · #9 Nov 10th, 2007, 11:57

That's the problem... I dont see a red box! or do you mean the: Your Ad Here bit?

dhossai · #10 Nov 10th, 2007, 12:10

You are right. I just test that with the firefox 2.0.0.6 I don't see that either. But i was testing with IE7, Netscape7.2 and firfox9 and it was there. so Could you pls try a different browser if it is possible?

dab42pat · #11 Nov 10th, 2007, 12:12

Just did a quick check. ie7 page looks fine and has the orange rectangle, FF orange rectangle not showing, ie6 your right hand menu(login etc) is pushed down to the left under your left menu orange rectangle is under that.

dhossai · #12 Nov 10th, 2007, 14:58

Hi dab,
Thanks for your check. Now do you know how to correct this multibrowser and multiversion layout problem or any idea!

AdRock · #13 Nov 10th, 2007, 15:34

There is a few warning that you need to fix that html validator in Fireofx has picked up but when trying to validate your code using the w3c validator i get this error message

Quote:

Line 1, Column 121: cannot continue because of previous errors.

I would check your doctype and revalidate

MikeHopley · #14 Nov 10th, 2007, 17:26

For heaven's sake, validate your page! Your code is a horrible mess.

To start with, look at this:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

That's one of the more bizarre doctype mistakes I've seen. Make up your mind: is it XHTML trans., or HTML Strict (Strict is better)?

Stuart · #15 Nov 10th, 2007, 17:49

OK, I now see the red box too (in IE7). But before we can work on it, validate! That is always top priority...

dhossai · #16 Nov 11th, 2007, 23:21

Ok friends!
It is giving me too much pain now. Here is my CSS code and you already have the html from the link here http://www.bangladeshilivingabroad.com/111/index.html Please help me out with this. Can u pls show me my problem and solutions. The page should look like the one is viewd in IE 7. And layout should stay same in netscape and FF. Thank you guys all very much in advance.
Here is my CSS:

PHP: Select all


/* CSS Document */
/*PAGE LAYOUT*/
body, html {
height:100%;
}
body {
 background-image: url(images/bg_body.jpg);
 background-repeat: repeat-x;
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}
#wrap {
 position:relative;
 width:780px;
 margin:auto;
 min-height:100%;
}
* html #wrap {
 height:100%;
}
#inner-wrap {
 padding-bottom:80px;
}
#inner-wrap:after {
 content:" ";
 display:block;
 clear:both;
}
* html #inner-wrap {
 height:1px;
}
#toppage{
 width:800px;
}
#date{
 float:left; width:150px; height:20px; border-bottom:solid 1px #999999; border-right:solid 1px #999999;
}
#topbar{
 float:left; 
 width:648px; 
 height:20px; 
 background-color:#339966;
 border-right:solid 1px #999999;
}
#header{
 width:800px;
 
}
#content{
 width:800px;
}
#contenttext{
 float:left; width:460px; 
 background-color:#F7F7F7; 
 border-left:solid 1px #999999; border-right:solid 1px #999999; 
 border-bottom:solid 1px #999999; border-top:dotted 1px #CCCCCC; 
 min-height:360px;
}
#pagetitle{
 position:relative; 
 float:left; 
 width:800px; 
 height:70px; 
 background-image:url(banner.gif);    
 border-right:solid 1px #FF3300;
 border-left:solid 1px #FF3300;
 border-top:solid 1px #FF3300;
 border-bottom:solid 1px #FF3300;
}
#menu{
 float:left; width:150px; margin:0px;
}
#leftad{
 float:left; width:150px; 
 margin:0px;
 height:40px
 border-right:solid 1px #FF3300;
 border-left:solid 1px #FF3300;
 border-top:solid 1px #FF3300;
 border-bottom:solid 1px #FF3300;
}
#rmenu{
 float:left; width:188px; margin:0px;
}
#addmenu{
 float:left; 
 width:185px; 
 margin:0px;
 min-height:135px;
 /*border-right:solid 1px #999999;*/
}
#leftad{
 float:left; width:150px; 
 margin:1px;
 height:40px
 border-right:solid 1px #FF3300;
 border-left:solid 1px #FF3300;
 border-top:solid 1px #FF3300;
 border-bottom:solid 1px #FF3300;
}
#bottomad{
 float:center; 
 width:800px; 
 margin:0px;
 height:80px;
 border-right:solid 1px #FF3300;
 border-left:solid 1px #FF3300;
 border-top:solid 1px #FF3300;
 border-bottom:solid 1px #FF3300;
}
#footer {
 position:absolute;
 bottom:0;
 width:100%;
 height:50px;
} 
/*GRAY PANEL*/
.panel{
 padding:12px;
 border:solid 1px #E4E4E4;
 background-color:#EEEEEE;
 margin:10px;
 padding:10px;
 width:400px;
 height:160px;
}
/*TEXT STYLES*/
.bodytext {
 font: 0.8em Tahoma, sans-serif;
 color: #000000;
}
.smalltext {
 font: 0.7em Tahoma, sans-serif;
 font-size:

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Styling problem