Re: [css-d] Div's not aligning right in IE7
Dave M G wrote:
However, two problems remain. The background graphics on the left and
right side of of the main body are still a little out of alignment.
The addition of...
#left-side, #right-side {zoom: 1;}
...or whatever 'hasLayout' trigger you fancy that doesn't break other
browsers, will fix that part.
FWIW: I can't see the point in that IE6 warning
The list moderator has made it clear to me in the past that this list
is not the place for discussing opinions about this kind of thing.
I'm happy to discuss it, but it'd have to be off list.
I could have worded that differently, as I was referring to the fact
that IE7 is an IE6 with a few additions and fixes, and a huge number of
patches. Thus, IE6 only need some of those patches to make it render
your page at least as good as IE7.
Other than that I have no opinion about, or interest in, what anyone put
up on their pages or which browsers they choose to support, so there's
nothing to discuss - on or off list.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS Geometry
http://www.css-zibaldone.com/test/geometry/ happy new year greetings :-) -- http://www.css-zibaldone.com/ http://mimicry.css-zibaldone.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Geometry
At 3:16 PM +0100 12/26/07, Gabriele Romanato wrote: http://www.css-zibaldone.com/test/geometry/ happy new year greetings :-) That's neat. Along similar lines, please review: http://www.designdetector.com/tips/CSSPencils.php Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div's not aligning right in IE7
Gunlaug, Thank you for responding. The addition of... ...or whatever 'hasLayout' trigger you fancy that doesn't break other browsers, will fix that part. I added 'height: 100%', since 'zoom' seems to be MS proprietary, which I'd rather avoid. So that has triggered 'hasLayout' and solved the problem of the side graphics. So the only thing I'm left with to get IE7 on board is to make the text in the bottom right corner fit be where it is supposed to be. Anyone's help would be greatly appreciated. If you look at the screen captures here: http://www.browsercam.com/public.aspx?proj_id=371261 You can see that the text in the bottom right, which is in a div called '.footer-text-right', and has a 'margin:0px 50px 0px 0px;', the margin seems to be having no effect. Thank you for any advice. -- Dave M G Articlass - open source CMS http://articlass.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE7 Bug
Hi, I am experiencing a weird bug(http://www.bleusolutions.com/images/IE7%20bug.gif) with IE 7...when the page (http://www.bleusolutions.com) loads in FF and IE everything is fine...but as soon as you hover over one of the navigation links it breaks and some the .sub_teasers text flows right over to the #footer..If anyone can help me out with this, it would be great. Thanx -- -Bdot There are only 10 kinds of people in this world. Those who understand binary and those who don't __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 Bug
Sorry, I forgot to point out exactly where the bug is...if you look at the bottom of IE7 bug pic where the footer is at On Dec 26, 2007 10:49 AM, Brian Jones [EMAIL PROTECTED] wrote: Hi, I am experiencing a weird bug(http://www.bleusolutions.com/images/IE7%20bug.gif) with IE 7...when the page (http://www.bleusolutions.com) loads in FF and IE everything is fine...but as soon as you hover over one of the navigation links it breaks and some the .sub_teasers text flows right over to the #footer..If anyone can help me out with this, it would be great. Thanx -- -Bdot There are only 10 kinds of people in this world. Those who understand binary and those who don't -- -Bdot There are only 10 kinds of people in this world. Those who understand binary and those who don't __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Geometry
Gabriele Romanato wrote: http://www.css-zibaldone.com/test/geometry/ happy new year greetings :-) Gosh. I didn't know folks in Italy celebrate the New Year, too... Oh, btw, this is my favorite: http://www.css-zibaldone.com/test/geometry/5/demo.html As ever, Piet Mondrian -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 Bug
Brian, Try adding position:relative; to your #wrapper declaration in bleu.css. -HP Brian Jones wrote: Hi, I am experiencing a weird bug(http://www.bleusolutions.com/images/IE7%20bug.gif) with IE 7...when the page (http://www.bleusolutions.com) loads in FF and IE everything is fine...but as soon as you hover over one of the navigation links it breaks and some the .sub_teasers text flows right over to the #footer..If anyone can help me out with this, it would be great. Thanx __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 Bug
On Dec 26, 2007 12:47 PM, Highpowered [EMAIL PROTECTED] wrote: Brian, Try adding position:relative; to your #wrapper declaration in bleu.css. Thanx a lot it worked..Do you know why that was occurring? -- -Bdot There are only 10 kinds of people in this world. Those who understand binary and those who don't __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 Bug
Brian, Try adding position:relative; to your #wrapper declaration in bleu.css. -HP (Apologies if this is a duplicate) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div's not aligning right in IE7
Dave M G wrote:
CSS Discuss,
I have created a page at the following URL:
http://tokyocomedy.com/tokyo_comedy_store
The CSS and HTML validate. The design displays as intended in FireFox
and Opera. (The design doesn't quite fit into an 800 pixel wide space,
which I intend to adjust.)
In Explorer version 7, on XP and Vista, however, the alignment of
various div tags is askew, as can be seen here:
http://www.browsercam.com/public.aspx?proj_id=371261
What is IE7 doing different?
Thank you for any advice.
Dave,
You need to add a float:right to all of your *-right divs and they
should also be closed (i.e. /div before starting another div ...
Here is my code for http://projects.missioninternet.com/proweb. I
removed most of the content to make it easier to see the flow of divs.
-Tim
body
div id=pageDef
?php include
(http://projects.missioninternet.com/proweb/include/header.php;); ?
?php include
(http://projects.missioninternet.com/proweb/include/topmenu.php?page=home;);
?
div id=content
div class=infoSection
div class=infoSectionPad
div class=infoCol3
/div
!-- end infoCol3 --
div class=infoCol2
/div
!-- end infoCol2 --
div class=infoCol1
/div
!-- end infoCol1 --
/div
!-- end infoSectionPad --
/div
!-- end infoSection --
div class=infoSection
div class=infoSectionPad
div class=infoCol3
/div
!-- end infoCol3 --
div class=infoCol2
/div
!-- end infoCol2 --
div class=infoCol1
/div
!-- end infoCol1 --
/div
!-- end infoSectionPad --
/div
!-- end infoSection --
/div
!-- end content --
div id=footer
div id=footerPad
div id=footerCol2
ul
lia href=/proweb/Home/anbsp;nbsp;|nbsp;nbsp;a
href=/proweb/search-engine-optimization/Search Engine
Optimization/anbsp;nbsp;|nbsp;nbsp;a
href=/proweb/paid-search-management/Paid Search Management/a/li
lia href=/proweb/terms-of-use/Terms of
Use/anbsp;nbsp;|nbsp;nbsp;a href=/proweb/privacy-policyPrivacy
Policy/anbsp;nbsp;|nbsp;nbsp;a href=/proweb/site-map/Site
Map/anbsp;nbsp;|nbsp;nbsp;a href=/proweb/login/Client
Login/a/li
/ul
/div
!-- end footerCol2 --
div id=footerCol1
ul
liCopyright © 2007 ProWeb Marketing, All rights reserved./li
liPortland, OR/li
/ul
/div
!-- end footerCol1 --
/div
!-- end footerPad --
/div
div style=margin:0 auto 0 auto;
img src=/proweb/images/bottom-left.jpg width=15 height=15
id=bottomBorderLeft alt=
img src=/proweb/images/bottom-center.jpg width=780 height=15
id=bottomBorderCenter alt=
img src=/proweb/images/bottom-right.jpg width=15 height=15
id=bottomBorderRight alt=
/div
!-- end footer --
Here's the stylesheet for the footer:
#footer {
background-image:url(../images/bg.jpg);
background-repeat:repeat-y;
clear:both;
position: relative;
background-color: #FF;
width: 810px;
margin: 0 auto 0 auto;
padding: 0;
}
#footer img {
border: none;
}
#footerPad {
border-top-color: #0076D6;
border-top-style: solid;
border-top-width: 1px;
font-size: 11px;
height: 30px;
margin: 5px auto 0 auto;
padding-top: 10px;
width: 780px;
}
#footer a {
color : #0076D6;
text-decoration : none;
}
#footer a:visited {
color : #0076D6;
text-decoration : none;
}
#footer a:hover {
font-weight: bold;
text-decoration : underline;
}
#footer img {
margin-left: 4px;
margin-right: 4px;
border: none;
}
#footerCol1 {
float: left;
width: 50%;
margin: 0;
}
#footerCol1 ul {
margin:0;
padding: 0;
text-align: left;
}
#footerCol1 li {
list-style: none;
text-align: left;
}
#footerCol2 {
color : #0076D6;
float: right;
width: 50%;
margin: 0;
text-align: right;
}
#footerCol2 ul {
margin:0;
padding: 0;
text-align: right;
}
#footerCol2 li {
list-style: none;
text-align: right;
}
#bottomBorderLeft {
border:none;
float: left;
height: 15px;
width: 15px;
}
#bottomBorderCenter {
border:none;
float: left;
height: 15px;
width: 780px;
}
#bottomBorderRight {
border:none;
float: left;
height: 15px;
width: 15px;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] From Fireworks mockup to table free site
Fireworks to HTML tables sounds like total proprietary goo. You need fresh air! Suggest you buy Microsoft Expression Web. It's more open source than Microsoft (although some Redmond extensions are built in). It has rock solid basic css templates to get you started. Maybe foundation is a better description than basic. What I find nice about EW is that you can incorporate many of your own disc resources into working designs. Don't expect miracles. There are still some compatibility issues drifting everywhere. All those issues are global and have nothing to do with EW. The biggest learning curve is getting a feel for how different browsers view your work. Generallly, clean code sparks little controversy. Far less problematic than say Dreamweaver or FrontPage design outputs. My fav online resource is www.w3schools.org where you get detailed tabled breakdowns of how elements, attributes and values are handled by different browser versions. This helps us to intuit what accessibility we will sacrifice to allow what new functionality. That puts us in control of the press process, so to speak. Of course, you'll want to keep a few browsers installed on your system so you can test your EW designs in various environments. The Firefox IE7 combo is pretty popular. Familiarity tends, however, to inspire creativity. Basic css is fairly universal. As a site grows and functionality is added in, more tweaking is required. Fun! But if you are a developer you won't be able to resist a more philosophical approach to css possibilities with the likes of Stu Nicholls, Russ Weakley, Patrick Griffiths and Eric Meyers. These guys at times are thirsting for a teaching role and can be a big help. Of course Cheryl Wise is there too. In so far as some dev folks have sys prefs, Cheryl is certainly a windows zombie. Stu likes to try to confound Windows coders, which is not going to happen as long as you stick to EW. When you understand his Mac prefs, his code games can be pretty interesting. Printed material from Patrick, Jason Teague and Que can be useful, in a comparative sense. Motivations? Personally, I like exploring liquid layouts, ems and percents. There are certain bugs built into pixels and static dimensions that frankly make putting them together illogical. That being the foundation of how we all stumbled into cyber-together, what can we say? Anyway, good luck. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Mission Marketing Sent: Saturday, December 22, 2007 7:59 AM To: css-d@lists.css-discuss.org Subject: [css-d] From Fireworks mockup to table free site I'm accustomed to designing web designs/mockups using Fireworks and exporting to HTML with the heavy use of tables, and finally want to learn to create full CSS sites. I've always resisted learning this approach because of the amount of non-billable time it would take to get up to speed but have finally realized table-based design is out. Are there any resources available for us designers that would help me learn to take a mockup like this (http://www.missionmarketing.com/clients/wolfftanning/wolff-mockup08.htm) and export to HTML/CSS? Thanks for your help. Brett __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Site Check ::Nayan Indore::
Compliments of the season. I have issues in IE (XP) with faux-columns - www.nayanindore.com The style4ie.css is courtesy Mr. David Laakso--Mr. Georg Sortun. Menu from Mr. Tedd Sperling. Appreciate site-check cross browser; and all advise. Thanks. -- Best, JL Jehangir Larry __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] lis get separed if abs positioned a is inside them
Hi everybody,
I'd be grateful if some of you could help me.
Please open IE7 or 6 and go to:
_http://www.giuseppecraparottacv.co.uk/work-web3.html
y_ou see that there's a works link - an a tag displayed as a block -
in each of the first 4 boxes - all li part of an ul.
The a tag is absolutely positioned in the context of the li, which
is relatively positioned.
This styles seem to imply that in IE6 and 7 a clear grey border appears
below the first 4 li's, as you can see. It is actually the page
background, not a border part of my design.
In Firefox there's no grey between the boxes, which is the way it should be.
Besides, when I increase the page's size, the works' button looses part
of the blue.
How can I get rid of these defects? Is something I do wrong?
Thanks much,
Giuseppe
I attach the CSS styles below, in bold those I guess are relevant
body {
padding:0;
margin:0;
font:0.9em Verdana, Arial, Helvetica, sans-serif;
background-color:#BFBFBF;
}
h1, p, strong, ul, li, .field, a, div {
padding:0;
margin:0;
}
a {
text-decoration:none;
}
ul {
min-width:574px;
width:39.8em;
margin:0 auto;
list-style-type:none;
border-right:4px solid #737272;
border-left:4px solid #737272;
} /*works - non serve a niente specificare l'altezza*/
.field {
min-width:574px;
width:39.8em;
margin:0 auto;
background:#ff;
padding-bottom:0.7em;
border-right:4px solid #737272;
border-left:4px solid #737272;
}
h1 {
margin:0 auto;
font-size:0.60em;
color:#ff;
text-align:center;
line-height:1.55em;
width:558px;
height:1.80em;
background:#00abe4 url(img/bg-header.jpg) no-repeat bottom center;
}
*
li {
position:relative;
width:100%;
}*
.odd {
background-color:#EAF4F5;
}
.even {
background-color:#ff;
}
*
a.works {
display:block;
width:3.7em;
height:1.4em;
text-align:center;
color:#ff;
background:url(img/bg-works.jpg) repeat-x;
position:absolute;
top:79%;
left:80%;
}*
li p {
padding:1.1em 1em 0 1.5em;
width:37.3em;
}
li .popup{
color:#00B9F6;
line-height:1.8em;
}
#browse {
margin:0 auto;
min-width:574px;
width:39.8em;
height:4.06em;
color:#6C6C6C;
background-color:#E1E1E1;
border-top:3px solid #737272;
border-right:4px solid #737272;
border-left:4px solid #737272;
border-bottom:4px solid #737272;
}
#browse p {
padding:0.65em 1em 0 1.5em;
}
ul.areas {
list-style:none;
border:none;
}
li.area {
width:6em;
/*height:26px;*/
height:1.83em;
float:left;
/*background:url(img/bg-areas-shad.jpg) no-repeat;*/
display:inline;
margin-top:0.39em;
}
li.area a {
display:block;
width:7.855em;
min-width:79px;
height:2.1em;
text-align:center;
/*min-width:79px;*/
color:#00;
font:bold 0.7em/2em verdana;
margin-top:0.5em;
margin-left:0.40em;
}
li.mktg {
margin-left:1.3em;
}
li.radio {
margin-left:9.6em;
margin-right:9.5em;
}
li.mktg a {
background:#F92D2D url(img/bg-areas-mktg.jpg) no-repeat left top;
}
li.mktg a:hover {
background:#F92D2D url(img/bg-areas-mktg.jpg) no-repeat left -8.3em;
}
li.radio a {
background: #FFF005 url(img/bg-areas-radio.jpg) no-repeat left top;
}
li.radio a:hover {
background: #FFF005 url(img/bg-areas-radio.jpg) no-repeat left -8.3em;
}
li.res a {
background: #809A79 url(img/bg-areas-res.jpg) no-repeat left top;
}
li.res a:hover {
background: #809A79 url(img/bg-areas-res.jpg) no-repeat left -8.3em;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] list whitespace bug issue with IE
I have a site HYPERLINK http://www.familyfirstdocs.comhttp://www.familyfirstdocs.com This site was done in Adobe Dreamweaver CS3. It validates and seems to work on my computer. I’ve tested it with Windows XP with IE7, Win XP with Firefox 2.0, WinXP with Opera 9.25, however, my client who has Windows Vista with IE7 and Windows XP with IE6 has issues. On Vista with IE 7 the menu juggles over to the left and in Win XP with IE6 they can’t seem to view the menu properly at all. I don’t have IE6 on my computer but I’ve ran the browser compatibility check in Dreamweaver CS3 and it gives me an Extra Whitespace in List Links bug issue. I’ve tried to apply the fixes it recommends and the client still has the issue. Does anyone have any suggestions? Thanks in advance Lisa No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.503 / Virus Database: 269.17.5/1190 - Release Date: 12/19/2007 7:37 PM __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check ::Nayan Indore::
Jehangir Larry wrote:
Compliments of the season.
I have issues in IE (XP) with faux-columns - www.nayanindore.com
Appreciate site-check cross browser; and all advise.
Thanks.
#page{background-color: #f8f8e1;}--- add the background-color ::
#outer{height:1%;} -- add height: 1%; to each (you may not need it on
all four ::
#wrapper{height:1%;}
#container{height:1%;}
#content{height:1%;}
IE/6.0 dose not seem to be honoring min/max width.
--You are calling the style sheet for it
style4ie.css
twice. Leave only the one that is in the CCs for IE6:
Re-write the CC for IE 6 and down to read:
!--[if lte IE 7]
![endif]--
Please note I have /not/ tested any iof the above.
Good luck.
~dL
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] lis get separed if abs positioned a is inside them
Giuseppe Craparotta wrote: Please open IE7 or 6 and go to: _http://www.giuseppecraparottacv.co.uk/work-web3.html y_ou see that there's a works link - an a tag displayed as a block - in each of the first 4 boxes - all li part of an ul. The a tag is absolutely positioned in the context of the li, which is relatively positioned. This styles seem to imply that in IE6 and 7 a clear grey border appears below the first 4 li's, as you can see. It is actually the page background, not a border part of my design. The band-aid approach: Applying a margin-top of -5px to li.odd and li.even seems to fix it in WinXP/IE6. For the long term: I'd recommend a bit of XHTML restructuring to make this design easier to implement across browsers. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] lis get separed if abs positioned a is inside them
This styles seem to imply that in IE6 and 7 a clear grey border appears
below the first 4 li's, as you can see. It is actually the page
background, not a border part of my design.
In Firefox there's no grey between the boxes, which is the way it should
be.
Besides, when I increase the page's size, the works' button looses part
of the blue.
How can I get rid of these defects? Is something I do wrong?
Thanks much,
Giuseppe
I think if you remove the width from the list item you'll be OK
li {
position:relative;
}
--
Susan R. Grossman
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] lis get separed if abs positioned a is inside them
Hi everybody,
I'd be grateful if some of you could help me.
Please open IE7 or 6 and go to:
_http://www.giuseppecraparottacv.co.uk/work-web3.html
y_ou see that there's a works link - an a tag displayed as a block -
in each of the first 4 boxes - all li part of an ul.
The a tag is absolutely positioned in the context of the li, which
is relatively positioned.
This styles seem to imply that in IE6 and 7 a clear grey border appears
below the first 4 li's, as you can see. It is actually the page
background, not a border part of my design.
In Firefox there's no grey between the boxes, which is the way it should
be.
Besides, when I increase the page's size, the works' button looses part
of the blue.
How can I get rid of these defects? Is something I do wrong?
Thanks much,
Giuseppe
I attach the CSS styles below, in bold those I guess are relevant
body {
padding:0;
margin:0;
font:0.9em Verdana, Arial, Helvetica, sans-serif;
background-color:#BFBFBF;
}
h1, p, strong, ul, li, .field, a, div {
padding:0;
margin:0;
}
a {
text-decoration:none;
}
ul {
min-width:574px;
width:39.8em;
margin:0 auto;
list-style-type:none;
border-right:4px solid #737272;
border-left:4px solid #737272;
}
.field {
min-width:574px;
width:39.8em;
margin:0 auto;
background:#ff;
padding-bottom:0.7em;
border-right:4px solid #737272;
border-left:4px solid #737272;
}
h1 {
margin:0 auto;
font-size:0.60em;
color:#ff;
text-align:center;
line-height:1.55em;
width:558px;
height:1.80em;
background:#00abe4 url(img/bg-header.jpg) no-repeat bottom center;
}
*li {
position:relative;
width:100%;
}
*.odd {
background-color:#EAF4F5; }
.even {
background-color:#ff; }
*a.works {
display:block;
width:3.7em;
height:1.4em;
text-align:center;
color:#ff;
background:url(img/bg-works.jpg) repeat-x;
position:absolute;
top:79%;
left:80%;
}*
li p {
padding:1.1em 1em 0 1.5em;
width:37.3em;
}
li .popup{
color:#00B9F6;
line-height:1.8em;
}
#browse {
margin:0 auto;
min-width:574px;
width:39.8em;
height:4.06em;
color:#6C6C6C;
background-color:#E1E1E1;
border-top:3px solid #737272;
border-right:4px solid #737272;
border-left:4px solid #737272;
border-bottom:4px solid #737272;
}
#browse p {
padding:0.65em 1em 0 1.5em;
}
ul.areas {
list-style:none;
border:none;
}
li.area {
width:6em;
/*height:26px;*/
height:1.83em;
float:left;
/*background:url(img/bg-areas-shad.jpg) no-repeat;*/
display:inline;
margin-top:0.39em;
}
li.area a {
display:block;
width:7.855em;
min-width:79px;
height:2.1em;
text-align:center;
/*min-width:79px;*/
color:#00;
font:bold 0.7em/2em verdana;
margin-top:0.5em;
margin-left:0.40em;
}
li.mktg {
margin-left:1.3em;
}
li.radio {
margin-left:9.6em;
margin-right:9.5em;
}
li.mktg a {
background:#F92D2D url(img/bg-areas-mktg.jpg) no-repeat left top;
}
li.mktg a:hover {
background:#F92D2D url(img/bg-areas-mktg.jpg) no-repeat left -8.3em;
}
li.radio a {
background: #FFF005 url(img/bg-areas-radio.jpg) no-repeat left top;
}
li.radio a:hover {
background: #FFF005 url(img/bg-areas-radio.jpg) no-repeat left -8.3em;
}
li.res a {
background: #809A79 url(img/bg-areas-res.jpg) no-repeat left top;
}
li.res a:hover {
background: #809A79 url(img/bg-areas-res.jpg) no-repeat left -8.3em;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] list whitespace bug issue with IE
Lisa G. Wilcox wrote:
http://www.familyfirstdocs.com
I don’t have IE6 on my computer but I’ve ran the browser
compatibility check in Dreamweaver CS3 and it gives me an Extra
Whitespace in List Links bug issue. I’ve tried to apply the fixes it
recommends and the client still has the issue.
1: delete the entire !--[if lt ie 7] 'ie-win.css' stylesheet, as
nothing in there makes any sense.
2: add...
#menuh ul li {height: 1%;}
...as 'hasLayout' trigger for IE6.
3: since IE6 doesn't react on :hover on anything but anchors, add a
'whatever:hover.htc' file...
http://www.xs4all.nl/~peterned/csshover.html
...to add the necessary functionality.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check ::Nayan Indore::
David Laakso wrote:
Jehangir Larry wrote:
Compliments of the season.
I have issues in IE (XP) with faux-columns - www.nayanindore.com
Appreciate site-check cross browser; and all advise.
Thanks.
#page{background-color: #f8f8e1;}--- add the background-color ::
#outer{height:1%;} -- add height: 1%; to each (you may not need it on
all four ::
#wrapper{height:1%;}
#container{height:1%;}
#content{height:1%;}
IE/6.0 dose not seem to be honoring min/max width.
--You are calling the style sheet for it
style4ie.css
twice. Leave only the one that is in the CCs for IE6:
Re-write the CC for IE 6 and down to read:
!--[if lte IE 7]
![endif]--
Please note I have /not/ tested any iof the above.
Good luck.
~dL
Thank you. These two words say it all.
It now works - even in IE6, at text Largest. Most grateful.
I would appreciate a web-link to understand (if possible ;-)) the 1%
hack and the stuff in style4ie.css .
Perhaps Molly...
A Happy 2008 to all.
--
Best,
JL
Jehangir Larry
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div's not aligning right in IE7
CSS-d Following on my own post, I saw on the web that there might be a bug in IE7 that prevents margins from working properly. It was recommended that one could use padding instead, depending on the circumstances. I tried using padding where I was having an alignment problem, and it still displays okay in FireFox, but it does not seem to have helped IE7. So unfortunately it seems that's not the problem. In any case, the problem remains essentially this: If you look at the screen captures here: http://www.browsercam.com/public.aspx?proj_id=371261 You can see that the text in the bottom right, which is in a div called '.footer-text-right', and has a 'padding:0px 50px 0px 0px;', the margin seems to be having no effect. Any help would be greatly appreciated. -- Dave M G Articlass - open source CMS http://articlass.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check ::Nayan Indore::
Jehangir Larry wrote:
David Laakso wrote:
Jehangir Larry wrote:
Compliments of the season.
I have issues in IE (XP) with faux-columns - www.nayanindore.com
Appreciate site-check cross browser; and all advise.
Thanks.
#page{background-color: #f8f8e1;}--- add the background-color ::
#outer{height:1%;} -- add height: 1%; to each (you may not need it on
all four ::
#wrapper{height:1%;}
#container{height:1%;}
#content{height:1%;}
IE/6.0 dose not seem to be honoring min/max width.
--You are calling the style sheet for it
style4ie.css
twice. Leave only the one that is in the CCs for IE6:
Re-write the CC for IE 6 and down to read:
!--[if lte IE 7]
![endif]--
Please note I have /not/ tested any iof the above.
Good luck.
~dL
Thank you. These two words say it all.
It now works - even in IE6, at text Largest. Most grateful.
I would appreciate a web-link to understand (if possible ;-)) the 1%
hack and the stuff in style4ie.css .
Perhaps Molly...
A Happy 2008 to all.
Good.
Georg Sortun is better at explaing this stuff than me, but anyway--
height : 1%;, or min-height : 0; could have been used as well, are
hasLayout triggers to give layout (make win/IE -- IE /7 -- in this
instance, behave dimensionally). It is a complex and most difficult
concept that is well explained here:
http://www.satzansatz.de/cssd/onhavinglayout.html
Min/max width is not supported in IE 6 and down. Georg explains the
work around used in your style sheet
style4ie.css for IE 6
here:
http://www.gunlaug.no/contents/wd_additions_14.html
HTH.
Best,
~d
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] image resize does not work in Opera when setting width and height 100%
Hello everyone
I'm working on a fluid layour in a music portal.
In the frontpage, I must show an image (according the headline news)
from 477x200. This would look good in resolutions up to 1024x768, but
in other resolutions (like 1280x768) the image look just to small
inside it box.
So what I'm doing is aplying the following properties to the image:
.headline img{
border:1px dotted #666;
width:100%;
height:100%;
}
This works perfect in Firefox and IE, but in Opera it just shows a dot
instead the image. I just don't get it.
The page (still under developement) can be found here
http://curefans.com/newsite/
Any help will be appreciated!
Thanks
David.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check ::Nayan Indore::
David Laakso wrote:
Jehangir Larry wrote:
David Laakso wrote:
Jehangir Larry wrote:
Compliments of the season.
I have issues in IE (XP) with faux-columns - www.nayanindore.com
Appreciate site-check cross browser; and all advise.
Thanks.
#page{background-color: #f8f8e1;}--- add the background-color ::
#outer{height:1%;} -- add height: 1%; to each (you may not need it
on all four ::
#wrapper{height:1%;}
#container{height:1%;}
#content{height:1%;}
IE/6.0 dose not seem to be honoring min/max width.
--You are calling the style sheet for it
style4ie.css
twice. Leave only the one that is in the CCs for IE6:
Re-write the CC for IE 6 and down to read:
!--[if lte IE 7]
![endif]--
Please note I have /not/ tested any iof the above.
Good luck.
~dL
Thank you. These two words say it all.
It now works - even in IE6, at text Largest. Most grateful.
I would appreciate a web-link to understand (if possible ;-)) the 1%
hack and the stuff in style4ie.css .
Perhaps Molly...
A Happy 2008 to all.
Good.
Georg Sortun is better at explaing this stuff than me, but anyway--
height : 1%;, or min-height : 0; could have been used as well, are
hasLayout triggers to give layout (make win/IE -- IE /7 -- in this
instance, behave dimensionally). It is a complex and most difficult
concept that is well explained here:
http://www.satzansatz.de/cssd/onhavinglayout.html
Min/max width is not supported in IE 6 and down. Georg explains the
work around used in your style sheet
style4ie.css for IE 6
here:
http://www.gunlaug.no/contents/wd_additions_14.html
HTH.
Best,
~d
Many thanks again.
BTW, the menu has now stopped working in IE6!
Is Tedd listening?!
--
Best,
JL
Jehangir Larry
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check ::Nayan Indore::
Jehangir Larry wrote: www.nayanindore.com Many thanks again. BTW, the menu has now stopped working in IE6! Is Tedd listening?! I don't know if he's listening or not. If you are talking about the vertical flyout menu home/products/contact it seems to be working in: XP/IE6.0 and IE/7.0 on Mac OS X 10.4.11 (Wed 10:40p) ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check ::Nayan Indore::
On 26-Dec-07, at 7:03 PM, Jehangir Larry wrote: www.nayanindore.com Your list bullets ( Nayan Optiks, et al.) could use a little more padding on most OS X browsers. I found your menu a little less than obvious, but that is a fairly subjective thing. In Firefox 2/OS X, the 'Y' in your logo seems to be getting cut off. Perhaps adjusting the margins/padding around that character will help? Best, - Rahul. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image resize does not work in Opera when setting width and height 100%
David Sánchez (Železnic(ná Stanica) wrote:
http://curefans.com/newsite/
This works perfect in Firefox and IE, but in Opera it just shows a
dot instead the image. I just don't get it.
Opera pre 9.50beta seems to misinterpret the 'height:100%' to mean zero.
Changing it to...
.headline img{
border:1px dotted #666;
width:100%;
height:auto;
}
...works as expected in all browsers. That's because 'height: 100%'
should be interpreted to mean 'auto' anyway, since there's no height to
calculate '100%' from. Opera 9.50betas get it right no matter what.
Note that IE6 will time out on slow connections, lose the width/height
ratio and distort the image - make it much too tall. Doesn't matter what
values you use - percentage or 'auto', since IE6 and older don't
preserve image-ratios.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image resize does not work in Opera when setting width and height 100%
Gunlaug Sørtun wrote:
David Sánchez (Železnic(ná Stanica) wrote:
http://curefans.com/newsite/
This works perfect in Firefox and IE, but in Opera it just shows a
dot instead the image. I just don't get it.
Opera pre 9.50beta seems to misinterpret the 'height:100%' to mean zero.
Changing it to...
.headline img{
border:1px dotted #666;
width:100%;
height:auto;
}
...works as expected in all browsers. That's because 'height: 100%'
should be interpreted to mean 'auto' anyway, since there's no height to
calculate '100%' from. Opera 9.50betas get it right no matter what.
Note that IE6 will time out on slow connections, lose the width/height
ratio and distort the image - make it much too tall. Doesn't matter what
values you use - percentage or 'auto', since IE6 and older don't
preserve image-ratios.
regards
Georg
Sorry for the discouraging news, but you are dropping the right column
in IE/6.0 on this end.
XP/IE Mac OS X 10.4.11.
Best,
~dL
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] lis get separed if abs positioned a is inside them
Giuseppe Craparotta wrote:
This styles seem to imply that in IE6 and 7 a clear grey border appears
below the first 4 li's, as you can see. It is actually the page
background, not a border part of my design.
In Firefox there's no grey between the boxes, which is the way it should
be.
I wasn't able to fully test this so be sure to run it through the works
(you've got a width defined on the list items so floating them shouldn't
be a problem in say MacIE, etc - but it's always good to test). That
said, it works here at home in FF and IE7.
Added to your stylesheet:
ul {
overflow:hidden;} - make the float wrapper appear to encapsulate
it's floaty children ;)
li.odd, li.even {
float:left;} - the real meat of the fix, gets rid of that phantom
space under your list items.
You could also feed the li styles to only IE6and7 using something like
this in your head:
!--[if gte IE 5.5000]
style type=text/css
li.odd, li.even {
float:left;}
/style
![endif]--
Besides, when I increase the page's size, the works' button looses part
of the blue.
How can I get rid of these defects? Is something I do wrong?
Not quite sure what you mean. Perhaps you mean resizing the font?
1. Resizing the font in IE7 seems to resize your background as well
(although I'm not sure why; possibly an IE specific behavior there).
2. Resizing the font in Firefox goes as expected, the font height
eventually becomes greater than the height of your background image.
SCL
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image resize does not work in Opera when setting width andheight 100%
2007/12/26, Peter Hyde-Smith [EMAIL PROTECTED]: WOW, that's a lot of CSS! Looks nice in FF. First, you have a number of validation errors on both the XHTML and CSS side. You have uncoded special characters in some of the URLs, and you seem to have a closing /label tag with no opening partner. Ignore the CSS display: inline-block error, and just fix the hexadecimal color error. Thanks Peter and everyone who answered to my question. As I pointed in my first post, the site is still under development (the current site is at www.curefans.com), so yes, there are still mistakes to be fixed!. I'm migration from SMF (simple machines forum) to the powerful Drupal, and right now I am doing the frontpage layout. Hopefully I can arrange this image thing in Opera with the advice you guys gave me. Thanks a lot! David. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image resize does not work in Opera when setting width and height 100%
2007/12/26, Gunlaug Sørtun [EMAIL PROTECTED]:
David Sánchez (Železnic(ná Stanica) wrote:
http://curefans.com/newsite/
This works perfect in Firefox and IE, but in Opera it just shows a
dot instead the image. I just don't get it.
Opera pre 9.50beta seems to misinterpret the 'height:100%' to mean zero.
Changing it to...
.headline img{
border:1px dotted #666;
width:100%;
height:auto;
}
...works as expected in all browsers. That's because 'height: 100%'
should be interpreted to mean 'auto' anyway, since there's no height to
calculate '100%' from. Opera 9.50betas get it right no matter what.
Note that IE6 will time out on slow connections, lose the width/height
ratio and distort the image - make it much too tall. Doesn't matter what
values you use - percentage or 'auto', since IE6 and older don't
preserve image-ratios.
This solved the problem. Now the image looks OK in all browsers
including Opera and Internet Explorer 6!
Thanks a lot,
David.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image resize does not work in Opera when setting width andheight 100%
- Original Message -
From: David Sánchez (Zeleznicná Stanica) [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Sent: Wednesday, December 26, 2007 8:49 PM
Subject: [css-d] image resize does not work in Opera when setting width
andheight 100%
In the frontpage, I must show an image (according the headline news)
from 477x200. This would look good in resolutions up to 1024x768, but
in other resolutions (like 1280x768) the image look just to small
inside it box.
So what I'm doing is aplying the following properties to the image:
.headline img{
border:1px dotted #666;
width:100%;
height:100%;
}
This works perfect in Firefox and IE, but in Opera it just shows a dot
instead the image. I just don't get it.
The page (still under developement) can be found here
http://curefans.com/newsite/
David.
12/26/2007
David:
WOW, that's a lot of CSS! Looks nice in FF. First, you have a number of
validation errors on both the XHTML and CSS side. You have uncoded special
characters in some of the URLs, and you seem to have a closing /label tag
with no opening partner. Ignore the CSS display: inline-block error, and
just fix the hexadecimal color error.
...
width: 100%;
height: 100%;
...
says that the image will be 100% the width and height of its parent
container. It's possible that if the container has no explicit or forced
dimension, the image will not either; and Opera isn't cooperating by using
the dimensions declared in the img tag. Try adding,
.headline img {
...
display: block;
/* and-or */
margin-bottom: 0;
...
}
Otherwise, some other erudite soul will give you the Cure.
Best Regards,
Peter
www.fatpawdesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check ::Nayan Indore::
Rahul Gonsalves wrote: On 26-Dec-07, at 7:03 PM, Jehangir Larry wrote: www.nayanindore.com Your list bullets ( Nayan Optiks, et al.) could use a little more padding on most OS X browsers. I found your menu a little less than obvious, but that is a fairly subjective thing. In Firefox 2/OS X, the 'Y' in your logo seems to be getting cut off. Perhaps adjusting the margins/padding around that character will help? Best, - Rahul. Thanks, Rahul. -- Best, JL Jehangir Larry __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
