[HTML/CSS] DIV's, floating and FIREFOX

EliteGM · Dec 14, 2010

index.php

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" />
<link type="text/css" href="main.css" rel="stylesheet" />
<title>Layout test</title>
</head>
<body>

    <div class="wrapper">
    
        <div class="header">
            Yoyoyo
        </div>
    
        <div class="nav">
            Stuff
        </div>
    
        <div class="spacer"></div>
    
        <div class="main">
        
            <div class="announcements">
            
            	<?php
					for($i = 0; $i < 3; $i++)
					{
				?>
            
                <div class="announcement">
                
                    <div class="announcement_title">
                        Title
                    </div>
                    
                    <div class="announcement_content">
                        Text
                    </div>
                
                </div>
                
                <div class="spacer"></div>
                
                <?
					}
				?>
                      
            </div>

            <div class="ads">

                <div class="ad">

                    <div class="ad_title">
                        Title
                    </div>
                    
                    <div class="ad_content">
                        Text
                    </div>
                
                </div>
            
                <div class="ad">

                    <div class="ad_title">
                        Title
                    </div>
                    
                    <div class="ad_content">
                        Text
                    </div>
                
                </div>
            
            </div>
        
        </div>
    
        <div class="spacer"> </div>
    
    </div>
    
</body>
</html>

main.css

Code:

body {
	background: green;
}

.wrapper {
	width: 790px;
	margin: auto;
}

.header {
	width: 273px;
	height: 234px;
	margin: auto;
	border: 1px solid black;
	background: lime;
}

.nav {
	width: 790px;
	height: 31px;
	border: 1px solid black;
	background: lime;
}

.spacer {
	width: 100%;
	height: 30px;
}

.main {
	width: 790px;
}

.announcements {
	float: left;
}

.announcement {
	width: 500px;
	border: 1px solid white;
}

.announcement_title {
	height: 35px;
	border: 1px solid black;
	background: darkgreen;
}

.announcement_content {
	height: 330px;
	border: 1px solid black;
	background: lime;
}

.ads {
	float: right;
}

.ad {
	width: 260px;
	border: 1px solid white;
}

.ad_title {
	width: 260px;
	height: 30px;
	border: 1px solid black;
	background: darkgreen;
}

.ad_content {
	width: 260px;
	height: 360px;
	border: 1px solid black;
	background: lime;
}

Don't bother with the looks atm.

EDIT:
So I found out it's a FireFox problem. IE shows it properly. Not sure about Chrome or any others. The DreamWeaver designer shows it properly too (didn't use that to make this, just checked to see).

This is weird because usually the problem is the other way around -> FireFox it runs smooth but issues in IE :S

What did I do wrong?

GeNyaa · Dec 14, 2010

You must be registered to see links

Well look at those codes...
I think that's what you want right?
you want to let something show above the other stuff and in place?

EliteGM · Dec 14, 2010

This is how it should be, and is in everything but FireFox:

EliteGM - [HTML/CSS] DIV's, floating and FIREFOX - RaGEZONE Forums

This is how it looks in FireFox right now:

I'm only speaking of positioning here. Ignore all borders/colours.

GeNyaa · Dec 14, 2010

Well I never used Float...
But you can build that with an table and some basic divs.
Do I need to do that for you?

Aaron · Dec 14, 2010

I'm not the best at CSS, but you would want a wrapper, and then classify the divs for left and right.

Sort of like this:

You must be registered to see links

onemorejosh · Dec 14, 2010

The problem is with your spacer class

Change it's width to 1px instead of 100% and you should be fine

Everything you did is theoretically fine, its just browsers being quirky that you need to work around

---------- Post added at 02:39 PM ---------- Previous post was at 02:34 PM ----------

btw ... holthelper...

I think the issue with you is because he sorta asked a question like "I'm having trouble with my car - the tire went flat, can someone help?" and your response was "Sometimes various cars have some trouble, it's wise to plan for car trouble"

It's cool to know that cars sometimes have troubles, but it didn't help with his specific question

EliteGM · Dec 15, 2010

@Nyaa:
I want it strictly in DIV's. The problem is not that I can't code it, it just pops up wrong in FireFox.

@Aaron:
I actually do have a wrapper in my CSS. It's called ".wrapper"

:

@onemorejosh:
Will try that out asap, thanks =)

foxx · Dec 15, 2010

would help you but I have no Idea what you want it to look like, your IE version seems as fokked as firefox's

EliteGM · Dec 15, 2010

The pics I posted are of the DW preview and FF, not IE and FF

Here is what it looks like in IE (this is what I want):

Notice how the right-hand panels aren't present in the FireFox pic a few posts up...

EDIT:
@josh:
I tried out the 1px width but still it won't work :/

foxx · Dec 15, 2010

You must be registered to see links

EliteGM · Dec 15, 2010

Thanks ur the best

What's with the huge 1st line in your CSS file tho? Is that what did the trick there? Is it some kind of FireFox CSS Hack-fix-thing?

Or, I also see you removed the right float and added a margin, did that do it?

foxx · Dec 15, 2010

css reset.. resets all the poop that has browser as default, like body margin.. because they vary in every browser, like paragraph has defaulty margin bottom and top 10px in ff, 12 in opera 14 in webkit(just throwing numbers)

---------- Post added at 04:49 PM ---------- Previous post was at 04:47 PM ----------

You must be registered to see links

---------- Post added at 06:37 PM ---------- Previous post was at 04:49 PM ----------

EliteGM said:
Or, I also see you removed the right float and added a margin, did that do it?

I kinda completely rewrote it.

You should float whichever column you expect to have less content, also if you are floating something to left and something to right, right float has to be before left float, in DOM.

Like

PHP:

<div id="wrap">
  <div class="right"></div>
  <div class="left"></div>
</div>

Also using some spacers is waste of code.

And titles should be in heading tags..

And if you since browsers have different box models, you shouldn't use padding and width/height, so if you want box 500px in width, and with 20px padding inside, you should do

<div class="box">
<div class="padding">

</div>
</div>

where
.box {
width: 500px;
}

.padding {
padding: 20px;
}

and elements you expect to be only once on page, eg. wrapper, should have ID instead of classess, makes it easier for javascript to get that element, since not all browsers have getElementByClass()

also something you need to float things and have it's container maintaing height, that's where you use clear: both(left/right); as I did with #content because if I didn't do it, #content would expand only to height of non floated element, in your case I'd be fine, but if .left bigger than .right, it could duck things up

also IE doesn't add borders to box model, so if you did

#content {
width: 500px;
border: 1px solid #ccc;
}

in IE it would still have 500px;, but in all other modern browsers it'd have 502
and bunch of other things

Welcome!

[HTML/CSS] DIV's, floating and FIREFOX

EliteGM

The Gamma..?

GeNyaa

Custom Title Activated

EliteGM

The Gamma..?

GeNyaa

Custom Title Activated

Aaron

ex visor

onemorejosh

Experienced Elementalist

EliteGM

The Gamma..?

foxx

Hm.

EliteGM

The Gamma..?

foxx

Hm.

EliteGM

The Gamma..?

foxx

Hm.

About Us

Online statistics

Forum statistics

RaGEZONE Sponsor