[WSG] set height versus height set to auto
I'm still plugging along learning but I'm once again
stumped. I've been attempting to take a Photoshop design image that was
sliced and diced and make it into a tableless web page. I'm trying to get
this page to look as close to the original design image (
http://www.designbyatfb.com/temp-images/ut-sample-lrg-2.jpg warning image is
214 kb) as possible. It is not fluid, it is not perfect.
I'm doing this for myself, just using misc. stuff from a acquaintances site.
So this is not an actual commercial site. This is a practice site for my own
sake.
The index page works and acts exactly as I imagined it should in FF and IE.
css is located here:
http://www.designbyatfb.com/temp-images/ut-web/css/main-style.css
index page is located here:
http://www.designbyatfb.com/temp-images/ut-web/index.html
}
#middlecontent{
width:auto;
height:348px;
position:relative
}
#middlelefttext{
position:relative;
float:left;
clear:right;
height:348px;
width:298px;
color:rgb(0,0,0);
font:10pt Trebuchet MS,Arial,Helvetica,sans-serif;
text-align:right;
padding:0px 5px 0px 5px;
background:rgb(255,255,255)
}
#middlerightimage{
position:relative;
right:0px;
top:0px;
float:right;
clear:right;
height:348px;
width:auto;
background:rgb(255,255,255)
}
However, to further confuse me, this page
http://www.designbyatfb.com/temp-images/ut-web/gucci.html, whose
more-style.css (
http://www.designbyatfb.com/temp-images/ut-web/css/more-style.css ) is an
exact replica of main-style, except I've changed the fixed heights to auto:
This was my attempt to make the page expandable in height for that content
area }#middlecontent{width:auto;height:auto;position:relative}#middlelefttext{position:relative;float:left;clear:right;height:auto;width:298px;color:rgb(0,0,0);font:10pt
Trebuchet MS,Arial,Helvetica,sans-serif;text-align:right;padding:0px 5px
0px
5px;background:rgb(255,255,255)}#middlerightimage{position:relative;right:0px;top:0px;float:right;clear:right;height:auto;width:auto;background:rgb(255,255,255)}The
big challenge is the next page, or the Gucci page. This page works great in
IE it adds white space under the purse image, However this page completely
falls apart in FF. I am thinking it is the height in the following portion
of the main-style.css . I've used font sizes in pt, I realize that is not a
very good or accessible practice. I've questions too about link titles, are
they necessary for accessibility? I've not run through any accessibilty
tests so far. Thanks Sharron
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] set height versus height set to auto
IE = 6 will expand heights to contain content. Other browsers won't. The
reason why everything's getting messed up in FF Opera is because of the
set heights. Editing your CSS in FF, I made these changes and it looked OK:
#middlecontent{
}
#middlelefttext{
float:left;
width:298px;
color:rgb(0,0,0);
font:10pt Trebuchet MS,Arial,Helvetica,sans-serif;
text-align:right;
padding:0px 5px 0px 5px;
background:rgb(255,255,255)
}
#middlerightimage{
margin-left: 300px;
background:rgb(255,255,255)
}
Even on your index page, you probably don't need to set a height; just
make sure whatever content follows after the image is cleared properly as
the text next to the image is floated. (At default text size, the image is
longer than the text anyway, so the the need to clear the following
content won't appear as apparent until the content or text size is
increased and becomes longer than the image.)
On Wed, 18 Oct 2006 12:12:03 +1000, [EMAIL PROTECTED] wrote:
I'm still plugging along learning but I'm once again
stumped. I've been attempting to take a Photoshop design image that was
sliced and diced and make it into a tableless web page. I'm trying to
get this page to look as close to the original design image (
http://www.designbyatfb.com/temp-images/ut-sample-lrg-2.jpg warning
image is 214 kb) as possible. It is not fluid, it is not perfect.
I'm doing this for myself, just using misc. stuff from a acquaintances
site. So this is not an actual commercial site. This is a practice site
for my own sake.
The index page works and acts exactly as I imagined it should in FF and
IE.
css is located here:
http://www.designbyatfb.com/temp-images/ut-web/css/main-style.css
index page is located here:
http://www.designbyatfb.com/temp-images/ut-web/index.html
}
#middlecontent{
width:auto;
height:348px;
position:relative
}
#middlelefttext{
position:relative;
float:left;
clear:right;
height:348px;
width:298px;
color:rgb(0,0,0);
font:10pt Trebuchet MS,Arial,Helvetica,sans-serif;
text-align:right;
padding:0px 5px 0px 5px;
background:rgb(255,255,255)
}
#middlerightimage{
position:relative;
right:0px;
top:0px;
float:right;
clear:right;
height:348px;
width:auto;
background:rgb(255,255,255)
}
However, to further confuse me, this page
http://www.designbyatfb.com/temp-images/ut-web/gucci.html, whose
more-style.css (
http://www.designbyatfb.com/temp-images/ut-web/css/more-style.css ) is
an exact replica of main-style, except I've changed the fixed heights to
auto: This was my attempt to make the page expandable in height for that
content area
}#middlecontent{width:auto;height:auto;position:relative}#middlelefttext{position:relative;float:left;clear:right;height:auto;width:298px;color:rgb(0,0,0);font:10pt
Trebuchet MS,Arial,Helvetica,sans-serif;text-align:right;padding:0px
5px 0px
5px;background:rgb(255,255,255)}#middlerightimage{position:relative;right:0px;top:0px;float:right;clear:right;height:auto;width:auto;background:rgb(255,255,255)}The
big challenge is the next page, or the Gucci page. This page works great
in IE it adds white space under the purse image, However this page
completely falls apart in FF. I am thinking it is the height in the
following portion of the main-style.css . I've used font sizes in pt, I
realize that is not a very good or accessible practice. I've questions
too about link titles, are they necessary for accessibility? I've not
run through any accessibilty tests so far. Thanks Sharron
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
Web print design services
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] set height versus height set to auto
It's not how I would build it, but..
Lose the width : auto;'s, width is already auto so you don't need to define
it again.
The height styles everywhere are indicative or trying to compensate from
something going wrong in the design, instead of setting a height work our
what's causing the content to be pushed down and fix that instead. (There
are legitimate uses of height, but they're few and far between)
Lastly, why is everything position relative?
It's a hard one to fix, and I think you've approached the cut up in the
wrong way. Work from the inside out, built up the page as a series of
individual elements then bring them all together. I find it's quicker and
you write much better code then by working from the outside in, or starting
at the top of the page and working down.
Thanks,
Samuel
-Original Message-
From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED]
On Behalf Of [EMAIL PROTECTED]
Sent: Wednesday, 18 October 2006 12:12 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] set height versus height set to auto
I'm still plugging along learning but I'm once again
stumped. I've been attempting to take a Photoshop design image that was
sliced and diced and make it into a tableless web page. I'm trying to get
this page to look as close to the original design image (
http://www.designbyatfb.com/temp-images/ut-sample-lrg-2.jpg warning image is
214 kb) as possible. It is not fluid, it is not perfect.
I'm doing this for myself, just using misc. stuff from a acquaintances site.
So this is not an actual commercial site. This is a practice site for my own
sake.
The index page works and acts exactly as I imagined it should in FF and IE.
css is located here:
http://www.designbyatfb.com/temp-images/ut-web/css/main-style.css
index page is located here:
http://www.designbyatfb.com/temp-images/ut-web/index.html
}
#middlecontent{
width:auto;
height:348px;
position:relative
}
#middlelefttext{
position:relative;
float:left;
clear:right;
height:348px;
width:298px;
color:rgb(0,0,0);
font:10pt Trebuchet MS,Arial,Helvetica,sans-serif;
text-align:right;
padding:0px 5px 0px 5px;
background:rgb(255,255,255)
}
#middlerightimage{
position:relative;
right:0px;
top:0px;
float:right;
clear:right;
height:348px;
width:auto;
background:rgb(255,255,255)
}
However, to further confuse me, this page
http://www.designbyatfb.com/temp-images/ut-web/gucci.html, whose
more-style.css (
http://www.designbyatfb.com/temp-images/ut-web/css/more-style.css ) is an
exact replica of main-style, except I've changed the fixed heights to auto:
This was my attempt to make the page expandable in height for that content
area
}#middlecontent{width:auto;height:auto;position:relative}#middlelefttext{pos
ition:relative;float:left;clear:right;height:auto;width:298px;color:rgb(0,0,
0);font:10pt
Trebuchet MS,Arial,Helvetica,sans-serif;text-align:right;padding:0px 5px
0px
5px;background:rgb(255,255,255)}#middlerightimage{position:relative;right:0p
x;top:0px;float:right;clear:right;height:auto;width:auto;background:rgb(255,
255,255)}The
big challenge is the next page, or the Gucci page. This page works great in
IE it adds white space under the purse image, However this page completely
falls apart in FF. I am thinking it is the height in the following portion
of the main-style.css . I've used font sizes in pt, I realize that is not a
very good or accessible practice. I've questions too about link titles, are
they necessary for accessibility? I've not run through any accessibilty
tests so far. Thanks Sharron
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] set height versus height set to auto
Samuel, You snuck out anresponse as I was
trying to organize my thoughts and text. I've not had oppourtunity to digest
your response yet. I started with a tabled page created when the images was
sliced up and rendered into a html page via image ready. So in essense, I
started building the css from the top table row by turning it into a div. Why is
everything set to relative? I don't know. Why did I build it this way?
Well, cause I wanted to see if I could do it at allfrom image to
css. I'm not a expert and have to learn one div at a time.
I will re read your reply and see what I can do as
you suggested. Thank you too for your response.
Thank you for the help! John,
I think I am making my, thus yourconfusion
worse. I apologize.
index page http://www.designbyatfb.com/temp-images/ut-web/index.htmluses
main-style.css with fixed heights for the middle areacss: http://www.designbyatfb.com/temp-images/ut-web/css/main-style.cssThis page renders exactly right in IE 6 and FF
1.5.0.7
gucci.html http://www.designbyatfb.com/temp-images/ut-web/gucci.html uses the same main-style.css. This page renders
almost right ( except for a small space under last image on the right side
#middlerightimage in IE the whole page falls apart in FF 1.0.5.7 (as I already
know and stated this css is using set height, which I know is wrong here for
this page).
gucci2.html http://www.designbyatfb.com/temp-images/ut-web/gucci2.htmluses my initial more-style.css http://www.designbyatfb.com/temp-images/ut-web/css/more-style.csswhich is almost identicle to the first css,all
I've changed is the set height toauto; for that middle area. This
page iscompletely off in FF 1.0.5.7 and IE 6.
gucci3.html http://www.designbyatfb.com/temp-images/ut-web/gucci3.htmluses more-style3.csshttp://www.designbyatfb.com/temp-images/ut-web/css/more-style3.css , with your suggested css changes. This page renders almost
perfect in FF 1.0.5.7 with a small white space to the right of the images. This
page in IE 6 is dropping the right image div and cutting off the right side of
the left text div.
- Original Message -
From: "John Faulds" [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Tuesday, October 17, 2006 9:41
PM
Subject: Re: [WSG] set height versus height set to
auto
IE = 6 will expand heights to contain content. Other browsers won't.
The reason why everything's getting messed up in FF Opera is
because of the set heights. Editing your CSS in FF, I made these
changes and it looked
OK:#middlecontent{}#middlelefttext{float:left;width:298px;color:rgb(0,0,0);font:10pt
"Trebuchet MS",Arial,Helvetica,sans-serif;text-align:right;padding:0px
5px 0px
5px;background:rgb(255,255,255)}#middlerightimage{margin-left:
300px;background:rgb(255,255,255)}Even on your index page, you
probably don't need to set a height; just make sure whatever content
follows after the image is cleared properly as the text next to the
image is floated. (At default text size, the image is longer than the
text anyway, so the the need to clear the following content won't
appear as apparent until the content or text size is increased and
becomes longer than the image.)
***List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfmUnsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfmHelp: [EMAIL PROTECTED]***
Re: [WSG] set height versus height set to auto
You're being afflicted by IE's 3 pixel gap and because you've got images
in the left and right columns that don't give you much leeway space-wise,
you may have to float the images. You'll then need to add clear: both to
whatever follows. So:
#middlelefttext{
float:left;
width:298px;
color:rgb(0,0,0);
font:10pt Trebuchet MS,Arial,Helvetica,sans-serif;
text-align:right;
padding:0px 5px 0px 5px;
background:rgb(255,255,255)
}
#middlerightimage{
margin-left: 298px;
background:rgb(255,255,255)
}
* html #middlerightimage img { float: right; } /* IE only - better
included via IE conditional comments */
#bottom-brwn-bar{
clear: both;
height:42px;
font:7pt Trebuchet MS,Arial,Helvetica,sans-serif;
text-align:right;
color:rgb(117,86,76);
line-height:14pt;
background:url(css-images/bottom-brwn-bar.gif)
}
On Wed, 18 Oct 2006 14:06:35 +1000, [EMAIL PROTECTED] wrote:
Samuel, You snuck out an response as I was trying to organize my
thoughts and text. I've not had oppourtunity to digest your response
yet. I started with a tabled page created when the images was sliced up
and rendered into a html page via image ready. So in essense, I started
building the css from the top table row by turning it into a div. Why is
everything set to relative? I don't know. Why did I build it this way?
Well, cause I wanted to see if I could do it at allfrom
image to css. I'm not a expert and have to learn one div at a time.
I will re read your reply and see what I can do as you suggested. Thank
you too for your response.
Thank you for the help! John,
I think I am making my, thus your confusion worse. I apologize.
index page http://www.designbyatfb.com/temp-images/ut-web/index.html
uses main-style.css with fixed heights for the middle area css:
http://www.designbyatfb.com/temp-images/ut-web/css/main-style.css This
page renders exactly right in IE 6 and FF 1.5.0.7
gucci.html http://www.designbyatfb.com/temp-images/ut-web/gucci.html
uses the same main-style.css. This page renders almost right ( except
for a small space under last image on the right side #middlerightimage
in IE the whole page falls apart in FF 1.0.5.7 (as I already know and
stated this css is using set height, which I know is wrong here for this
page).
gucci2.html http://www.designbyatfb.com/temp-images/ut-web/gucci2.html
uses my initial more-style.css
http://www.designbyatfb.com/temp-images/ut-web/css/more-style.css which
is almost identicle to the first css, all I've changed is the set height
to auto; for that middle area . This page is completely off in FF
1.0.5.7 and IE 6.
gucci3.html http://www.designbyatfb.com/temp-images/ut-web/gucci3.html
uses more-style3.css
http://www.designbyatfb.com/temp-images/ut-web/css/more-style3.css ,
with your suggested css changes. This page renders almost perfect in FF
1.0.5.7 with a small white space to the right of the images. This page
in IE 6 is dropping the right image div and cutting off the right side
of the left text div.
- Original Message -
From: John Faulds [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Tuesday, October 17, 2006 9:41 PM
Subject: Re: [WSG] set height versus height set to auto
IE = 6 will expand heights to contain content. Other browsers won't. The
reason why everything's getting messed up in FF Opera is because of the
set heights. Editing your CSS in FF, I made these changes and it looked
OK:
#middlecontent{
}
#middlelefttext{
float:left;
width:298px;
color:rgb(0,0,0);
font:10pt Trebuchet MS,Arial,Helvetica,sans-serif;
text-align:right;
padding:0px 5px 0px 5px;
background:rgb(255,255,255)
}
#middlerightimage{
margin-left: 300px;
background:rgb(255,255,255)
}
Even on your index page, you probably don't need to set a height; just
make sure whatever content follows after the image is cleared properly as
the text next to the image is floated. (At default text size, the image
is
longer than the text anyway, so the the need to clear the following
content won't appear as apparent until the content or text size is
increased and becomes longer than the image.)
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
Web print design services
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
