Re: [WSG] a few more issues with page layout with definition list

2005-08-05 Thread sam sherlock 

i spotted this in the css

div#thumbnailheaders dt dd {float:right; width:100px;}

should'nt it be 


div#thumbnailheaders dl dd {float:right; width:100px;}

atbSam


Rachel Radford wrote:


There are many ways of making a css rule so that different browsers see it
differently (do a google search for css filters...) but the way I do it
would  be like this:

div#maincontent_image{/*used as a holder and placement for main images which
appear on a page*/
float:left;
width:214px;
height:366px;
border-right:1px solid #333;
margin:0 1.5em 0 0;/*top margin for IE*/
background-color:#363;
}

div#maincontentdiv#maincontent_image{/*for FF*/
margin-top:-1.14em;
}

Because IE doesn't understand the  child selector so it will ignore that
rule.

It's looking mint in FF!  Good work!!


-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Bruce Gilbert
Sent: Friday, 5 August 2005 10:25 a.m.
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] a few more issues with page layout with definition list

On 8/4/05, Rachel Radford [EMAIL PROTECTED] wrote:
 


Hi Bruce,
It's looking good but quite different between FF and IE...

Try putting a negative top margin on the image with the hand and key...
   


that
 


should fix that problem for Firefox. But you might need to make it
conditional so that IE 6 won't do it too.  From a design point of view
perhaps a background colour on the div id=maincontent_image so that you
don't get the green colour below the image and so you create a visual
column??
   



Hey Rachel and group,

thanks for the tip about the neg. margin. Looks good in FF now but it
did mess up IE. What would a conditional statement for IE 6 consist
of?

here is the CSS in question:

div#maincontent_image{/*used as a holder and placement for main images
which appear on a page*/
float:left;
width:214px;
height:366px;
border-right:1px solid #333;
margin:-1.14em 1.5em 0 0;
background-color:#363;
}

http://www.wealthdevelopmentmortgage.com/test/test_file_home.htm
http://www.wealthdevelopmentmortgage.com/test/WDM.css
**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


 



**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**

RE: [WSG] a few more issues with page layout with definition list

2005-08-04 Thread Drake, Ted C. 
Hi Bruce
I'm working on a bug right now so I don't have much time
For more control over the dt positioning, apply position:relative to the dl
and then use absolute positioning for the dt. Or use negative margins to
move it without the positioning. 


-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Bruce Gilbert
Sent: Thursday, August 04, 2005 10:51 AM
To: wsg@webstandardsgroup.org
Subject: [WSG] a few more issues with page layout with definition list

Hello,

thanks for the information about using a definition list to layout
thumbnail images and text. I think this is a great way to do things. I
am still having some layout issues looking at firefox on the PC
though.

take a look at
http://www.wealthdevelopmentmortgage.com/test/test_file_home.htm
and the CSS at http://www.wealthdevelopmentmortgage.com/test/WDM.css

the thumbnail images and the text, aren't quite aligning like I
want.The dt shoul align to the right off the image above the dd list.
and a little for space between the image and text.

another small issue I am seeing is the picture with the hand holding
the key has some unwanted spacing at the top before you get to the
darker green bar. I need to get rid of that spacing and am not sure
where it is coming from.

Any assistance on this is greatly appreciated!!! 

-- 
::Bruce::
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**

RE: [WSG] a few more issues with page layout with definition list

2005-08-04 Thread Rachel Radford 
Hi Bruce,
It's looking good but quite different between FF and IE... 

Try putting a negative top margin on the image with the hand and key... that
should fix that problem for Firefox. But you might need to make it
conditional so that IE 6 won't do it too.  From a design point of view
perhaps a background colour on the div id=maincontent_image so that you
don't get the green colour below the image and so you create a visual
column??

With your dt... first of all set your margins and padding to 0. That will
give you a clean slate to work from to add your positioning and it *should*
(hopefully!) make it look the same in both IE and FF.

Hope that helps!

Rachel

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Bruce Gilbert
Sent: Friday, 5 August 2005 5:51 a.m.
To: wsg@webstandardsgroup.org
Subject: [WSG] a few more issues with page layout with definition list

Hello,

thanks for the information about using a definition list to layout
thumbnail images and text. I think this is a great way to do things. I
am still having some layout issues looking at firefox on the PC
though.

take a look at
http://www.wealthdevelopmentmortgage.com/test/test_file_home.htm
and the CSS at http://www.wealthdevelopmentmortgage.com/test/WDM.css

the thumbnail images and the text, aren't quite aligning like I
want.The dt shoul align to the right off the image above the dd list.
and a little for space between the image and text.

another small issue I am seeing is the picture with the hand holding
the key has some unwanted spacing at the top before you get to the
darker green bar. I need to get rid of that spacing and am not sure
where it is coming from.

Any assistance on this is greatly appreciated!!! 

-- 
::Bruce::
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**


**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**

Re: [WSG] a few more issues with page layout with definition list

2005-08-04 Thread Bruce Gilbert 
On 8/4/05, Rachel Radford [EMAIL PROTECTED] wrote:
 Hi Bruce,
 It's looking good but quite different between FF and IE...
 
 Try putting a negative top margin on the image with the hand and key... that
 should fix that problem for Firefox. But you might need to make it
 conditional so that IE 6 won't do it too.  From a design point of view
 perhaps a background colour on the div id=maincontent_image so that you
 don't get the green colour below the image and so you create a visual
 column??

Hey Rachel and group,

thanks for the tip about the neg. margin. Looks good in FF now but it
did mess up IE. What would a conditional statement for IE 6 consist
of?

here is the CSS in question:

div#maincontent_image{/*used as a holder and placement for main images
which appear on a page*/
float:left;
width:214px;
height:366px;
border-right:1px solid #333;
margin:-1.14em 1.5em 0 0;
background-color:#363;
}

http://www.wealthdevelopmentmortgage.com/test/test_file_home.htm
http://www.wealthdevelopmentmortgage.com/test/WDM.css
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**

RE: [WSG] a few more issues with page layout with definition list

2005-08-04 Thread Rachel Radford 
There are many ways of making a css rule so that different browsers see it
differently (do a google search for css filters...) but the way I do it
would  be like this:

div#maincontent_image{/*used as a holder and placement for main images which
appear on a page*/
float:left;
width:214px;
height:366px;
border-right:1px solid #333;
margin:0 1.5em 0 0;/*top margin for IE*/
background-color:#363;
}

div#maincontentdiv#maincontent_image{/*for FF*/
margin-top:-1.14em;
}

Because IE doesn't understand the  child selector so it will ignore that
rule.

It's looking mint in FF!  Good work!!


-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Bruce Gilbert
Sent: Friday, 5 August 2005 10:25 a.m.
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] a few more issues with page layout with definition list

On 8/4/05, Rachel Radford [EMAIL PROTECTED] wrote:
 Hi Bruce,
 It's looking good but quite different between FF and IE...
 
 Try putting a negative top margin on the image with the hand and key...
that
 should fix that problem for Firefox. But you might need to make it
 conditional so that IE 6 won't do it too.  From a design point of view
 perhaps a background colour on the div id=maincontent_image so that you
 don't get the green colour below the image and so you create a visual
 column??

Hey Rachel and group,

thanks for the tip about the neg. margin. Looks good in FF now but it
did mess up IE. What would a conditional statement for IE 6 consist
of?

here is the CSS in question:

div#maincontent_image{/*used as a holder and placement for main images
which appear on a page*/
float:left;
width:214px;
height:366px;
border-right:1px solid #333;
margin:-1.14em 1.5em 0 0;
background-color:#363;
}

http://www.wealthdevelopmentmortgage.com/test/test_file_home.htm
http://www.wealthdevelopmentmortgage.com/test/WDM.css
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**


**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**