25 replies [Last post]
deviantz
Offline
Regular
philippines
Last seen: 13 years 3 weeks ago
philippines
Joined: 2007-04-12
Posts: 25
Points: 0

hi pls also help bout my problem in firefox, im using float:right, but if the content if too long they overflow.. in IE the display is OK but not in firefox .. pls help me! thanks!

see this code..

/* css */
/* CSS Document */
body {
margin:0px;
}
img
{
border:0;
}
#header {
height:239px;
background-image:url("../images/header-bg.jpg");
background-repeat:repeat;
}
.header-content {
width:768px;
height:239px;
margin-left:auto;
margin-right:auto;
}

.logo {
float:left;
width:321px;
height:65px;
}

.banner {
width:773px;
height:159px;
}
#body {
width:773;
min-height:600px;
_height:auto !important;
height:600px;
background-color:#fff00f;
background-repeat:repeat;
margin-left:auto;
margin-right:auto;
}
.inner-content {
width:773px;
min-height:600px;
_height:auto !important;
height:600px;
background-color:#fff088;
background-repeat:repeat-y;
margin-left:auto;
margin-right:auto;
}
.menu {
padding-top:0px;
padding-left:10px;
padding-right:10px;
padding-bottom:5px;
margin-left:auto;
margin-right:auto;
}
.content-left {
border:1px solid red;
float:left;
width:200px;
height:400px;
padding-left:20px;
padding-right:10px;
margin-left:auto;
margin-right:auto;
}
.content-main {
border:1px solid red;
float:right;
width:500px;
height:400px;
padding-left:10px;
padding-right:20px;
margin-left:auto;
margin-right:auto;
}
#footer {
width:100%;
height:69px;
background-image:url("../images/footer-bg.jpg");
background-repeat:repeat;
margin-left:auto;
margin-right:auto;
}
.footer-bg {
width:773px;
height:68px;
background-image:url("../images/copy-bg.jpg");
margin-left:auto;
margin-right:auto;
}
.footer-content {
float:left;
width:737px;
height:40px;
padding-top:12px;
}
.footer-menu {
width:500x;
height:20px;
color:#000000;
font-family:Georgia;
font-size:15px;
text-decoration:none;
}
.footer-menu a:link {
color:#087ad2;
font-family:Georgia;
font-size:11px;
font-weight:normal;
text-decoration:none;
}
.footer-menu a:hover {
color:#087ad2;
font-family:Georgia;
font-size:11px;
font-weight:normal;
text-decoration:underline;
}
.footer-menu a:visited {
color:#087ad2;
font-family:Georgia;
font-size:11px;
font-weight:normal;
text-decoration:none;
}
.footer-menu ul {
padding:0px;
margin:0px;
}
.footer-menu li {
list-style-type:none;
float:left;
padding-right:6px;
}
.copy {
width:400px;
height:20px;
padding-top:5px;
margin-left:auto;
margin-right:auto;
color:#595a5a;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
}
.ctr {
text-align:center;
}

/* html */

div id="header"
div class="header-content"
div class="logo">Logo /div
div class="banner">Banner /div
/div
/div
div id="body"
div class="inner-content"
div class="menu" menu1 menu2 menu3 menu3 menu4 /div
div class="content-left"
!-- // ********* Start Left Content ********* //--
Left
!-- // ********* End Left Content ********* //--
/div
div class="content-main"
!-- // ********* Start Main Content ********* //--
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /
a br /

!-- // ********* End Main Content ********* //--
/div
/div
/div
div id="footer"
div class="footer-bg"
span class="footer-content ctr"
span class="footer-menu"
ul
li a href="#" MENU1 /a /li
li | /li
li a href="#" MENU2 /a /li
/ul
/span
br /
span class="copy" © Copyright 2007 /span
/span
/div
/div

Thanks in advance guys!

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 51 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

you are setting height. this

you are setting height. this means the element is NOT supposed to grow, which in IE is what happens. remove the height and things will be fine (unless you have floated elements within a non-floated container, in that case, search google for css clearfix).

If you need a minimum height, specify min-height. To make sure this also works in IE, specify height only for IE (which you do with the * html hack, for example: * html div.mydiv { height: 20px; }), and then you should be fine. Smile

As a rule, I never touch anything more sophisticated and delicate than myself

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Two things deviantz:

Two things deviantz:

it is not proper to tag new questions on to existing threads it's known as 'hijacking' always start your own topic/question; and to this end I have split your question to a new topic.

secondly please read the stickies and instructions on the text edit page that explain how to post code for display in posts, I will edit and correct your post this time round.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

deviantz
Offline
Regular
philippines
Last seen: 13 years 3 weeks ago
philippines
Joined: 2007-04-12
Posts: 25
Points: 0

so sorry..

so sorry sir, i just don't know what to do, i don't know how to poest a new topic here and also i don't know how to post a html code that will appear an exactly html tag..

thanks and im sorry again..

deviantz
Offline
Regular
philippines
Last seen: 13 years 3 weeks ago
philippines
Joined: 2007-04-12
Posts: 25
Points: 0

follow up

sir, can you post the code of what are you really talking about.. this is a big favor for me.. thanks sir!

can you edit the css

.inner-content {
width:773px;
min-height:600px;
_height:auto !important;
height:600px;
background-color:#fff088;
background-repeat:repeat-y;
margin-left:auto;
margin-right:auto;
}

the display in IE is ok., but not in firefox..

thanks again!

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 51 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

.inner-content

.inner-content {
width:773px;
min-height:600px;
_height:auto !important;
/*height:600px;*/
background-color:#fff088;
background-repeat:repeat-y;
margin-left:auto;
margin-right:auto;
}

try this

Or even better, try this (valid CSS):
.inner-content {
width:773px;
min-height:600px;
background-color:#fff088;
background-repeat:repeat-y;
margin-left:auto;
margin-right:auto;
}
* html .inner-content {
height: 600px;
}

see the * html .inner-content? that is the IE6 hack. remember it Smile

As a rule, I never touch anything more sophisticated and delicate than myself

deviantz
Offline
Regular
philippines
Last seen: 13 years 3 weeks ago
philippines
Joined: 2007-04-12
Posts: 25
Points: 0

same here sir..

same the problem sir, just want to make clear my problem is in firefox not in IE.. thanks!

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 51 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

ok I see you have

ok I see you have floats.

add this:

.inner-content:after {
height: 0;
visibility: hidden;
display: block;
content: ".";
clear: both;
}

I know the problem is with FF (which is actually not really true, the problem is IE, which is not listening to what you are telling it with your CSS, and that it happens to show a better page is more luck than anything else), but you have to specify some things for IE alone, in order to have it working right in both browsers.

As a rule, I never touch anything more sophisticated and delicate than myself

deviantz
Offline
Regular
philippines
Last seen: 13 years 3 weeks ago
philippines
Joined: 2007-04-12
Posts: 25
Points: 0

sir the code will like

sir the code will like this?

.inner-content {
width:773px;
min-height:600px;
background-color:#fff088;
background-repeat:repeat-y;
margin-left:auto;
margin-right:auto;
}
* html .inner-content {
height: 600px;
}
.inner-content:after {
height: 0;
visibility: hidden;
display: block;
content: ".";
clear: both;
}

sir but same the error..

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 51 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

yeah that should be it. do

yeah that should be it.

do you have an online example of the page?

Make sure you have a complete doctype an validate your HTML.

I noticed you have set a height in the body, which is probably not right, but I'd have to see the page first.

As a rule, I never touch anything more sophisticated and delicate than myself

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

PLEASE USE CODE TAGS; THE

PLEASE USE CODE TAGS; THE EXPLANATION AND INSTRUCTIONS ARE PLASTERED ALL OVER THE FORUM AND ARE ALSO AT THE BOTTOM OF THE TEXT EDIT BOX WHEN YOU CONSTRUCT A POST, READ THOSE INSTRUCTIONS IT'S REALLY THAT SIMPLE!!

As for how to make a new thread try selecting a forum and then clicking on the big button that says something like 'new thread', we all have to work out how to use apps such as this a few minutes spent trying and looking usually pays dividends.

Smile Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

deviantz
Offline
Regular
philippines
Last seen: 13 years 3 weeks ago
philippines
Joined: 2007-04-12
Posts: 25
Points: 0

here are the online sample -

here are the online sample - http://www.richmondehotel.com/layout/a.html
can you send me the exact what are the really problem..

Thanks so much

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 51 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

code tags for CSS doesn't

code tags for CSS doesn't matter that much? as long as it's perfectly well readable, I don't think there's much of a problem.

HTML of course is a different story

As a rule, I never touch anything more sophisticated and delicate than myself

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 51 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

the problem is

the problem is content-main
.content-main {
border:1px solid red;
float:right;
width:500px;
min-height:400px;
padding-left:10px;
padding-right:20px;
margin-left:auto;
margin-right:auto;
}
* html .content-main {
height: 400px;
}

You have 2 validation errors. Add a title in the head element, and don't put block-levels in inline elements (you have placed an ul within a span within a span. make divs of those spans)

As a rule, I never touch anything more sophisticated and delicate than myself

deviantz
Offline
Regular
philippines
Last seen: 13 years 3 weeks ago
philippines
Joined: 2007-04-12
Posts: 25
Points: 0

sir, i see the changes.. but

sir, i see the changes.. but still have a problem. pls refresh it sir the link that i give..

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

What problem do you still

What problem do you still see/have?

Always explain a problem as best as possible please.

If you mean the #footer the try adding clear:both to the ruleset.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

deviantz
Offline
Regular
philippines
Last seen: 13 years 3 weeks ago
philippines
Joined: 2007-04-12
Posts: 25
Points: 0

yew! great! it's done!

yew! great! it's done! thanks sir.. it's perpect! thank you sir really!!

god bless!

keep it up!

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 51 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

yeah I expected that ok

yeah I expected that Smile

ok listen, this is important.

First of all, forget about what internet explorer is doing. Firefox is the browser that is following what you tell it to do, making all errors your responsability.
By setting height, you tell the browser that element to be a certain height, and to be that height ALWAYS, no matter what happens within that element. Stuff flowing out of this element is called overflow. You can hide this by setting overflow: hidden; or overflow: auto; on the element where the content is flowing out of. This doesn't solve the problem however.

The problem is, you shouldn't set height. The element will expand if it's required when you leave out height, so just leave it out Smile

but you need a height when the element is empty as well? Ok, no problem. set min-height. The bad thing is that <IE6 will not get this. So how do we fix that? We know that IE handles height pretty much as min-height, as it expands anyway. So if we could set height ONLY to IE, this should fix our problem (because setting height to Firefox as well, would create the behaviour I explained a second ago). Luckily, we can do this, by using the star HTML hack:

* html .classname { height: 300px; }

now, with this knowledge in mind, take a look at your page.

You have specified some heights here and there. A height is specified when the element should ALWAYS remain that height. Now check every height in your stylesheet, is every element where you specified height supposed to stay that height no matter what?

If not, change it Smile

As a rule, I never touch anything more sophisticated and delicate than myself

deviantz
Offline
Regular
philippines
Last seen: 13 years 3 weeks ago
philippines
Joined: 2007-04-12
Posts: 25
Points: 0

ok sir.. got it! thanks

ok sir.. got it! thanks again sir!! now i can begin my website..! when i finish i let you know what are things i learn from you... god bless!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 21 hours 22 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Such a polite young newbie

Such a polite young newbie Wink

Can we class this thread as finished, or is there anything else you'd like to ask us?

Verschwindende wrote:
  • CSS doesn't make pies

deviantz
Offline
Regular
philippines
Last seen: 13 years 3 weeks ago
philippines
Joined: 2007-04-12
Posts: 25
Points: 0

thanks! anyway how i center

Smile thanks! anyway how i center my UL LI menu.. in my footer part.. because the i already try text-align:center; and margin-left:auto; margin-right:auto; but it didn't work..

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 51 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

if the link you gave us is

if the link you gave us is still up to date,

don't put the ul in spans, but put it in divs. ul is block level, span is inline, you cannot put block level elements within inline elements. (try validating)

make sure you don't float the element, and give the ul a width (else it will default to 100% width), make sure the containing elements have width as well (especially when they are floated).

As a rule, I never touch anything more sophisticated and delicate than myself

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 21 hours 22 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

By the way fella, for future

By the way fella, for future refernce, it helps if you give your topics a descriptive title. We'll help anybody who posts here, so you don't need to name your topic "help please", a better title would be something like "CSS float woes" or "confused about IDs" or "help with validation" Wink

Verschwindende wrote:
  • CSS doesn't make pies

deviantz
Offline
Regular
philippines
Last seen: 13 years 3 weeks ago
philippines
Joined: 2007-04-12
Posts: 25
Points: 0

thanks!

Thanks for reply.. i used SPAN there because i have a problem about DIV, because i make a PHP code that all content is in one file only so it easy to edit my website content..

see this code.

<?php
$source_file = "contents/main_contents.php";
$tag_open = "

";
$tag_close = "
";
echo uf_span_portion($source_file, $tag_open, $tag_close);
?>

My problem is when i used a DIV, the content is hide,

i think because of this code
$tag_close = "";

can you help me about this problem.. also SPAN here is error in validation..

Thanks u in advance!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 21 hours 22 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

I don't know much PHP, but

I don't know much PHP, but surely it should be:

echo uf_span_portion($tag_open, $source_file, $tag_close);

?

Alternatively look into PHP includes.

Verschwindende wrote:
  • CSS doesn't make pies

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 51 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

thepineapplehead wrote:I

thepineapplehead wrote:
I don't know much PHP, but surely it should be:

echo uf_span_portion($tag_open, $source_file, $tag_close);

?

Alternatively look into PHP includes.

there's no way of telling that though. depends on the function.

check your class, if you have multiple divs with ID main things might not work.

if you have specified the style with the element in front of it (ie. span.#main) it should be changed to div.#main

I suggest using classes.

and there's no way you get a UL within a SPAN and having it valid Smile

As a rule, I never touch anything more sophisticated and delicate than myself