Width: auto, firefox issue

Ive recently found that the issue is more to do with the 100% setting on the images within the divs - firefox cant handle the 100% can anyone tell me why or offer a solution?

I'm sorry,

Without your actual code I'm not following what it is you're trying to describe. I'd imagine that others have looked and thought the same thing.

LokiLoks

Here is the website

ive had to remove most imagery but the css is held within the page so you should be able to get everything here.

thanks

http://www.eclectic8.co.uk/Testing/jonnytester.html

Hi,
with your description, i feel you are trying to achieve what is called as a fluid layout. For that only width is not enough. You need to use the min-width and the max-width attributes.
Search on Fluid Layouts on google. Start working, as for any help you might need.

mihir

Your whole approach is backwards and mistaken. HTML is meant for marking up content, but you have no content!

Write your content first. Mark it up with valid and semantic html, not with DIVS. Then and only then should you start styling with CSS. THE WEB IS NOT PAPER!!!

I had to remove all content for a reason. This website only shows the specific part i am talking about.

The real and full site works fine. apart from this issue im having problems with

Well then, I can't help you for the same reason.

I dont understand?

All the elements needed to see the problem are there. The site is designed for 1024 so you will only be able to see what im talking about if you look at the site in a larger resolution than that.

What's to understand? I don't bother with contentless sites. There are plenty of others around here who may decide to help. Me, I don't deal with contentless sites. My reasons are my own, just as your reasons for not posting any content are your own.

So why haven't you solved the problem then? Everything you need is there after all.

Rather an unfortunate decision. What if I am reading at 600x600 or less? Or what if I can't see and am not looking at your site at all?

I actually look at a larger screen resolution that that, but as there is no content I choose to look no further. Shall I return your money?

First of all it isn't a "contentless" site. There's a lot of images as content.
I will agree, however, that the images don't actually contain content.

jOnnyd:

Let me try to clarify one of the reasons why seedhouse and others like him won't jump in to help here.

It's summed up by the phrase, "form follows function" or "content creates shape"

Your content, whether it be pictures or text will have a certain flow or logic behind how it fits together. This flow can be isolated into areas of content (divs). Your content is rife with, as far as I can tell, worthless divs creating far more complexity than your data is likely to need. Do a search on the term divitis and you'll find that many people fall into the same trap.

My original bout of divitis was a result of looking into CSSZenGarden. The standard template they offer has a bizzilion divs that aren't needed for many designs, and truly they're there to accomodate extravagant designers. The whole purpose of CZG is art, not creating a functional site that is efficient.

If you have concerns over possible plagiarism or trade secrets being stolen, simply use fake text that approximates the content you expect. If you need help making it up do a search for lorem ipsum or jabberwocky.

Without your content giving us an idea of what your site's flow will be we can't visualize what the best solution for your issue is.

Even without the content, I can tell you these two things:
1. You probably have 8 to 14 too many divs. I'd be hard pressed to have more than 5 divs for the header, 7 for the body and 5 for the footer. That's 17 and you're at 22.
2. Your images aren't content, and that being the case they should probably be background images for some element.

I don't know what ImageReady is, but you should probably learn how to slice your own images, I typically have 1 out of 3 images that are 1px tall or wide and the rest are like 10px square or so.

Also, off the top of my head, things that have no px or em or % next to the value can get you into trouble.

Hope that helps,

LokiLoks

P.S. If your content is adult or illegal, don't post it, use lorem ipsum or jabberwocky.

Does this help?

I have cleaned up the div tags and instead of using images inserted into the divs, i have assigned background images to the divs through css.

I have also written in the blocks i want to extend to help show you what i mean?

Can anyone help now?

http://www.eclectic8.co.uk/Testing/jonnytester.html

I could only spend a few minutes on it, but this is more like what you're going to want to do.

Absolute positions don't work too well with 100% width.

Hope that helps,

LokiLoks

Hi,

I have remade some of the site. I think its designed better.

Please have a look.

The top bar which goes all the way across the page has a right: 0; and a margin-left:5%; and the width is set to auto meaning it stretches to fit on all screens.

This works in both firefox and IE.

The thing i want is where the big square image is. I want grey to stretch out from the right all the way to the right hand side (right:0;) At the moment i have out an image there so you can see the type of thing i want. In IE it kind of works, but in Firefox, the image doesnt strecth at all.

If you have a solution, ideally i just want to make that section a bg color.

Any ideas?

http://www.eclectic8.co.uk/Testing/index.html
http://www.eclectic8.co.uk/Testing/global.css

Thanks

Im sure this is a typical problem, but i have searched extensively and found nothing that solves it easily.

Basically, the whole site is divs and css, i have set the holder tag to have a width of 100% so the site works in all browsers. I have divs top, middle and bottom, on the right (which hold blocks of colour) i want these to expand to the end of the screen depending on the resolution.

I have done it in IE by simple setting these divs to width:auto then setting the images within the divs to 100% in width.

However, nothing happens in Firefox - i take it there are issues with Firefox and the 'auto' property.

Can anyone help?

Example code:

#AIH-08 {
left:922px;
top:86px;
width:auto;
height:66px;
position: absolute;
}

THANKS!

Jonny
See my question at http://csscreator.com/node/24191, I have managed to make a div strech to full resolution no matter what the resolution with a single problem, to put it short style both the body and html to have width 100%, for more details view my post.

To explain this internet explorer only streches something to the whole viewport if the element it's in is also streched the base element for is is body (think of it like another div, a box), firefox goes a bit further by considering the html tag to be the base box of the page so to make it work in ff too you must style html too.

yeah, both html and body are set to width 100%

As it shows, the top strip works fine. Its just where i mutliple divs on the second line it seems to have problems when i try and get the div furthest to right to expand.

still baffling me, no one seems to know!?

Have a read of this:

http://csscreator.com/divitis

should get you going in the right direction