Re: [WSG] a few more issues with page layout with definition list
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;} atb>Sam 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#maincontent>div#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
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#maincontent>div#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 **
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 **
RE: [WSG] a few more issues with page layout with definition list
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
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 **