| Author |
image box css alignment problem (firefox)
|
|
|
| I think this has something to do with the way different browsers understand
padding and margin, but when I fix the alignment for one browser, it break it
for another! There must be a simple fix for this, any ideas?
The link is at:
http://www.munzamedia.co.uk/cssprob...2/u3-s3-lo2.htm
The problem image box is the one with the label underneath it which says 'A
luxury hotel' - I want the left edge to be in line with the text.
Thanks,
Mark
| |
| Gary White 2005-08-26, 7:20 pm |
| On Fri, 26 Aug 2005 09:20:15 +0000 (UTC), "15266"
<webforumsuser@macromedia.com> wrote:
> The problem image box is the one with the label underneath it which says 'A
>luxury hotel' - I want the left edge to be in line with the text.
Try replacing your .imagebox class with this:
..imagebox {
margin: 3px 10px 8px 30px;
border: 2px solid #99c;
font: 10px Arial, Helvetica, sans-serif;
background-color: #99c;
color: #fff;
float: left;
text-align: center;
}
Gary
| |
|
| Thankyou for the suggestion. Unfortunately this swapped the problem around, so
that firefox now displays correctly, but in IE6, the imagebox is indented too
much! Is there some code I can write which will make the two browsers react
differently?
What I mean by this, is that in the past I have seen code which is ignored or
bypassed by some browsers, which go on to read the remaining code. This way I
could define two different margin settings for the two browsers.
Thanks for the idea though,
Mark
| |
| Gary White 2005-08-26, 7:23 pm |
| On Fri, 26 Aug 2005 13:04:52 +0000 (UTC), "15266"
<webforumsuser@macromedia.com> wrote:
>Thankyou for the suggestion. Unfortunately this swapped the problem around, so
>that firefox now displays correctly, but in IE6, the imagebox is indented too
>much! Is there some code I can write which will make the two browsers react
>differently?
The reason IE is rendering it differently is because of the broken box
model it uses when rendering a page in quirks mode. Add a DOCTYPE to the
page. Try adding this at the VERY top of the source code of the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Gary
| |
|
| Thanks Gary. This has not changed the way that IE displays the page though. I
will look through different DOCTYPES and see if any other ones will help the
page. I will also go through my Zeldman book and read up more on working out
how to make a working box model hack, so that this image box will align
correctly in both IE and Firefox.
Mark
| |
| Gary White 2005-08-30, 7:36 pm |
| On Tue, 30 Aug 2005 16:16:07 +0000 (UTC), "15266"
<webforumsuser@macromedia.com> wrote:
>Thanks Gary. This has not changed the way that IE displays the page though. I
>will look through different DOCTYPES and see if any other ones will help the
>page. I will also go through my Zeldman book and read up more on working out
>how to make a working box model hack, so that this image box will align
>correctly in both IE and Firefox.
Currently, the page has NO doctype. Adding the proper doctype should fix
it. The box model in IE standards mode should be the same as Firefox.
Gary
| |
|
| The page had no doctype as I tried out your suggested ideas on my local drive. I have now uploaded the version with the DOCTYPE code, which has not fixed the problem.
| |
| Duncan HL 2005-08-31, 7:18 am |
| Use
body > .imagebox {
margin-left: 200px;
}
it's fully valid css and will not be read by IE. So first have the rule as
you do now and below that use this rule. IE will read the first and ignore the
above, other browsers will read both but action the last one, which is this
one. 200px needs to be adjusted to fit as you require.
Help?
| |
|
| Duncan HL - thanks - this worked!
So the problem is the way in which browsers read padding and margin. I
understand that each broswer reads the values differently and that IE is the
real problem browser. I will try this fix in the future when trying to get my
designs to work cross-browser.
Mark
| |
| Duncan HL 2005-08-31, 7:27 pm |
| Cool, no problem.
An alternative is to use *html .imagebox {style} which will only be read by
IE. This however is not valid CSS - if you're concerned by validation.
There are plenty of other hacks, such as one for Opera and others for IE -
worth looking them up as a resource.
| |
| Gary White 2005-08-31, 7:29 pm |
| On Wed, 31 Aug 2005 08:45:43 +0000 (UTC), "15266"
<webforumsuser@macromedia.com> wrote:
>The page had no doctype as I tried out your suggested ideas on my local
>drive. I have now uploaded the version with the DOCTYPE code, which has
>not fixed the problem.
Are you certain you're not seeing a cached copy? It looks exactly the
same in IE6 and Firefox here.
Gary
| |
| Murray *TMM* 2005-08-31, 7:32 pm |
| Why hack when the doctype does the trick?
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"Duncan HL" <webforumsuser@macromedia.com> wrote in message
news:df43so$foh$1@forums.macromedia.com...
> Cool, no problem.
>
> An alternative is to use *html .imagebox {style} which will only be read
> by
> IE. This however is not valid CSS - if you're concerned by validation.
>
> There are plenty of other hacks, such as one for Opera and others for IE -
> worth looking them up as a resource.
>
| |
| Duncan HL 2005-08-31, 7:33 pm |
| hack's a harsh word - the css validates doesn't it? ;)
I've made many websites with perfect xhtml transitional or strict doctypes
only to find that padding isn't consistent between IE and Firefox and this
'urge' saves the day. Even if the doctype thing you mention does the trick,
it's certainly useful and important to know and understand.
| |
| Gary White 2005-08-31, 7:33 pm |
| On Wed, 31 Aug 2005 14:45:29 +0000 (UTC), "Duncan HL"
<webforumsuser@macromedia.com> wrote:
>hack's a harsh word - the css validates doesn't it? ;)
Hack because it depends on browser rendering bugs to accomplish its
goal. That doesn't necessarily mean it's a bad thing. Sometimes "hacks"
are necessary. Most people feel it's better to avoid them when the
design goal can be accomplished in other ways.
When dealing with the peculiarities of IE, my preference is usually to
use the CSS that will accomplish my goals in modern standards compliant
browsers, then use IE's conditional comments where it's necessary to
correct IE's faulty rendering.
In accomplishing that, I prefer to use a doctype that will cause the
browser to render in standards compliance mode to avoid other buggy
behavior, like failure to properly inherit styles.
I'm not saying CSS hacks are wrong, or that my way is right. Just giving
an alternative view.
Gary
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |