Background Error Ff, cant there be just 1 browser? Options

[Distortion]

I have a site with a gradient background. In this background I have a white bar where the main content goes. The content is made up out of other boxes so I get something like.

CODE

<div class="content">
<div class="box1">
   blehblehbleh
  </div>
  <div class="box1">
   blehblehbleh
  </div>
<div class="box2">
   blehblehbleh
  </div>
<div class="box3">
   blehblehbleh
  </div>
</div>

I haven't specified a height for 'content' because I want it to wrap around the other boxes.
IE knows what to do, but firefox completely ignores the boxes and stops somewhere completely random.

Any suggestions?

[thescientist]

It would certainly help me, and for others I'm sure, if we could actually see what you're talking about.

This post has been edited by thescientist: Nov 3 2009, 01:22 AM

[how2html]

CODE

<div class="content">
<div class="box1">
   blehblehbleh
  </div>
  <div class="box1">
   blehblehbleh
  </div>
<div class="box2">
   blehblehbleh
  </div>
<div class="box3">
   blehblehbleh
  </div>
</div>

I really don't get the question. You are going to have to explain further, or give a link to your webpage.

[Distortion]

-

This post has been edited by Distortion: Nov 3 2009, 07:02 PM

[jlhaslip]

.memberbox, .ratebox are presently positioned using 'absolute' methods.
check out the 'float' method for positioning the second column.
Float, margin and padding are what you need to study.
Lots of 2-column layouts are to be found on GOOGLE.

[thescientist]

no doctype either! (IMG:style_emoticons/default/ohmy.gif)

check this out and tidy your page up too...
validator.w3.org

[Distortion]

float sucks. If I use float my box goes everywhere exept where I want it, my page is perfectly tidy if you don't like it tidy it up yourself, you might be right about the doctype though, margin and padding have influence on the rest of your page which I don't want, and google layouts are google layouts, not my layouts.
I'll figure this out myself thank you.

This post has been edited by Distortion: Nov 3 2009, 06:57 PM

[thescientist]

float sucks. If I use float my box goes everywhere exept where I want it, my page is perfectly tidy if you don't like it tidy it up yourself, you might be right about the doctype though, margin and padding have influence on the rest of your page which I don't want, and google layouts are google layouts, not my layouts.
I'll figure this out myself thank you.

wow, ok, sorry we're all just trying to help. There's really no need for attitude when you're the one coming to a community for help.

But still, we persist on anyway...

By setting a doctype, you force the browser into rendering a certain way, one which might be a bit more predictable, and also something you could anticipate for. The reason people recommend float is because other position attributes are somewhat unreliable and tend to make things get all wonky, and floats, padding's, and margin's generally accomplish most of what people require when it comes to positioning elements. Validating, with a good (read: strict DTD) is a good way to reduce the number of potential rendering conflicts that can arise cross-browser, and will make you're code more readable, reliable, standards compliant, and scalable. As far as 'Google layouts', I think he just meant that there are plenty of examples out there to help you find what you're looking for, and then you could come back and ask more questions if you were still confused. Most people just suggest Google because I think these days it's the most common search engine.

Hope that clears some things up for you. Good practices are better to adopt early on, and you'll thank us for showing you the way. The people here know what they are doing because a lot of them do this professionally or are just innately good at this kind of stuff. I would just take the time to listen first before simply dismissing what has been good advice and offerings of assistance.

This post has been edited by thescientist: Nov 3 2009, 08:23 PM

[Synook]

Note that floats, rather than absolute positioning, are the correct way to lay things out.

[Distortion]

ok I'm sorry, its just that on every site I've asked this untill now people gave me the same short answer like, oh it's your doctype. But it isn't. And I got a little angry because I still haven't found why FF does this.
I've validated it, but I didn't get any errors except for not specifying the doctype.
I can't really find the thing I want on google. They'll have pretty much the same as I had, but without the white content box that isn't working on my site.
I removed the link because the php/mysql scripts are still very unsafe.

Using floats is what I tried to do first, but I can't locate something higher than its original position with float.

(IMG:http://tchracoon.000a.biz/pictures/Naamloos.jpg)
This is what I want. When I use float on the left boxes, it'll go next to the last item instead of next to the first. Hence I used float only for the items and not for the boxes.

[thescientist]

This is why he suggested a two column layout. Have a column/container/div for the items and another column/container/div for your boxes.

<div id="container" width="700px">

<div id="boxes" padding-left="500px">
boxes
</div>

<div id="items "float:left">
items
</div>

</div>

or something like that. that was only meant as a quick illustration, the styles are obviously not declared right and should be in a CSS, but again, google will have this kind of info. seriously though, its the first link!

[Distortion]

Please don't pretend I'm stupid.
The only thing I wanted to know is why firefox doesn't act the way IE does and if there was a workaround.
Since you're not able to answer that question I'll use your 'google' method. My original question was not 'how to do a 2 column css layout' so that google link is slightly inappropriate. However, because it seems to be a fact that "floats, rather than absolute positioning, are the correct way to lay things out. "
I'll reprogram my css with 2 extra boxes.

Please note that with absolute positioning everything worked great, except for the interpreting mistake by firefox.

[Synook]

Did it work in Webkit et al.? One of the problems with absolute positioning is that it doesn't exactly work that well cross-browser. Also, it doesn't work as well with dynamic content, and breaks up the flow of elements. It is still appropriate to use absolute positioning in some cases, but not for the overall document layout.

[Distortion]

Thanks for that tip, i'll keep that in mind.
The problem is that I've removed all absolute positions and it still doesn't do what I want. At least the browser support is consistent now, IE also doesn't seem to notice the content box. There must be a programming error somewhere, I'll look into that again.
I don't know what Webkit is, i tried to download the program (i have windows vista) but it gave me an error when I started FindSafari.exe

Thank you for the help so far.

[thescientist]

what's your code up to now?

[Synook]

I don't know what Webkit is, i tried to download the program (i have windows vista) but it gave me an error when I started FindSafari.exe

Webkit is the rendering engine used by Safari, Chrome, Konqueror (sort of) and some mobile browsers. It uses a implementation method distinct from Firefox's Gecko, IE Trident, and Opera's Presto engines to figure out how to render pages, and as a result you can sometimes (or often) get differing results for the different browsers... even though they all follow the same standards!

Unless you want to make your own browser, you probably want to download Safari or Chrome, rather than the engine itself.