Re: [css-d] Testing for IE 5 and Below
Dean Champeau wrote: Hello. I checked the archives briefly, but was unable to find an answer to this... If all I have is IE 6 and I want to check compatibility with IE 5 and below, can I simply remove (or comment out) the DOCTYPE declaration, then run the page through IE 6 to simulate what would happen in the older browsers? No, that will not work. Do not modify or change the file. If you mean what you have is xp ie6, you could download standalone versions of ie501sp2_nt.zip and ie55sp2_nt.zip from here http://browsers.evolt.org/?ie/32bit/standalone. You can also get screen captures of a page you have on a public server in win/2000 ie5, 5.5, 6.0 from Browsercam: http://www.browsercam.com/ (although it is rather expensive unless you belong to a subscription group). And if you post to the list /with/ a clickable uri to your page, you'll most times find someone willing to test and/or provide screen shots. http://browsers.evolt.org/download.php?/ie/32bit/standalone/ie501sp2_nt.zip Thanks for your help. Please be kind... It's my first post. Welcome to the list. Dean Best, ~dL -- http://chelseacreekstudio.com/ca/ccs/pow/pow.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE loading and showing images
Thanks Michael, Changing the order fixed the problem. Don't know why I used the previous order, this way seems more logical.. Anyway I was still wondering if there is a way to make IE stop reloading the background image. I don't know if that's the issue, but what happens now is that because it seems to disappear and re-appear, when clicking a link, the page looks a bit shaky. While in FF for example the background stands still.. Is this normal behaviour for IE ? Is there a work-around for this problem ? Thanks in advance, Stefan 2006/7/26, Michael Landis [EMAIL PROTECTED]: On 7/25/06, Stefan Witte [EMAIL PROTECTED] wrote (about http://www.studionext.nl/dev): Dear list members, On the website I work on atm, i have this problem with IE win, showing the image of the roll over state while loading the website. I assume the problem is because the roll over state is the background of the div's. I used this technique because of the IE's flickering problem with the method of changing the background's images position on rollover. Did anyone of you encounter this problem ? Yes. It is actually a pretty animation effect as it is, but if it isn't intended, then I can understand it not being wanted. :-) Typically, to avoid rollover issues, the image behind the link should be the non-hovered state, instead of the hovered state. When the link is hovered, the hover-state image is added to the link's background image. The flicker is hidden by the presence of the non-hovered image behind everything. HTH, Michael __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] FF MSIE background image problem
Hi
I've been working on my company site www.arcolectric.co.uk/index2.html
and have designed it in pure CSS.
I have a background img assigned to the body element with a slight
fade, and a div that contains a background image of the menu bar along
the top, i need the background of the menu bar to line up to the
bodies background.
I've discovered that i have a problem with the mast head being
rendered differently in different browsers. On windows in IE the page
displays perfectly, but in firefox/safari on a mac a top margin of
around 7px appears in the div with the menu bar and so pushes the
alignment of the backgrounds out.
I currently have the following CSS for the menu and the body:
#banner_Distribution{
margin:auto;
margin-top:0px;
width:800px;
height:90px;
padding:0px;
padding-right:2px;
background:url(_images/banner_bg_agents.jpg) 0px 0px no-repeat;
}
body{
margin:0px 0px;
width:100%;
background:url(_images/main_body_bg.jpg) 0px -18px repeat-x;
padding:0px;
}
any one have any ideas, i've noticed if i surround the menu bar with a
border the problem fixes itself and have tried various solutions to no
avail HELP!
--
Regards
Terry O'Leary
Web Developer @ The Elektron Group
~Online dating community ? www.d8-m8.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] FF MSIE background positioning problem
Hi
I've been working on my company site www.arcolectric.co.uk/index2.html
and have designed it in pure CSS.
I have a background img assigned to the body element with a slight
fade, and a div that contains a background image of the menu bar along
the top, i need the background of the menu bar to line up to the
bodies background.
I've discovered that i have a problem with the mast head being
rendered differently in different browsers. On windows in IE the page
displays perfectly, but in firefox/safari on a mac a top margin of
around 7px appears in the div with the menu bar and so pushes the
alignment of the backgrounds out.
I currently have the following CSS for the menu and the body:
#banner_Distribution{
margin:auto;
margin-top:0px;
width:800px;
height:90px;
padding:0px;
padding-right:2px;
background:url(_images/banner_bg_agents.jpg) 0px 0px no-repeat;
}
body{
margin:0px 0px;
width:100%;
background:url(_images/main_body_bg.jpg) 0px -18px repeat-x;
padding:0px;
}
any one have any ideas, i've noticed if i surround the menu bar with a
border the problem fixes itself and have tried various solutions to no
avail HELP!
--
Regards
Terry O'Leary
Web Developer @ The Elektron Group
~Online dating community ? www.d8-m8.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE loading and showing images
Stefan Witte wrote: Anyway I was still wondering if there is a way to make IE stop reloading the background image. I don't know if that's the issue, but what happens now is that because it seems to disappear and re-appear, when clicking a link, the page looks a bit shaky. While in FF for example the background stands still.. Is this normal behaviour for IE ? Is there a work-around for this problem ? It's almost certainly your browser settings - you probably have IE set not to use the cache (as testing is virtually impossible otherwise), so what you see isn't what the majority of normal users would see. Have a look at http://archivist.incutio.com/viewlist/css-discuss/72983 in the list archives. HTH, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Page/Structure Check Before Proceeding
Chris Akins wrote: I have a fairly basic page I'm putting together and have it behaving, so far, in Firefox and Safari, but not in IE (wonder of wonders). Before I try to figure out the IE issues, with a little help from this list, hopefully, I'd like to get a more expert opinion on my page structure and basic CSS I've written so far. The page and CSS is: www.springfieldmogov.org/founders/new.html www.springfieldmogov.org/css/founders.css Is my current structure and mode of thinking regarding the CSS pretty correct, or is there something that's going to cause me major headaches? In the content area, I plan on having either a floated feature element or maybe two columns of real content. I'd like to get an idea of whether my current design will allow for that well. Would someone be so kind as to point me in the right direction as to what the issue is in IE regarding the menu images being higher than they should, the footer not being at the bottom, and the major gap in the side montage. I don't need you to do the work, but just tell me if the IE differences are due to padding, margin problems, will I need to use a hack to feed IE different info - that kind of thing. Chris, I saw your other message wondering why some of your threads don't get answers, so I thought I'd jump in and answer this one. Everything looks fine with your layout. The XHTML and the CSS are both pretty straightforward and clean, and it looks like you've fixed the IE issues as well. I see no red flags. Go forth and code. :-) Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE loading and showing images
Nick Fitzsimons wrote: Stefan Witte wrote: Anyway I was still wondering if there is a way to make IE stop reloading the background image. I don't know if that's the issue, but what happens now is that because it seems to disappear and re-appear, when clicking a link, the page looks a bit shaky. While in FF for example the background stands still.. Is this normal behaviour for IE ? Is there a work-around for this problem ? It's almost certainly your browser settings - you probably have IE set not to use the cache (as testing is virtually impossible otherwise), so what you see isn't what the majority of normal users would see. Have a look at http://archivist.incutio.com/viewlist/css-discuss/72983 in the list archives. In addition to changing your browser settings, you can ensure that even those who haven't changed their browser settings fail to see the flicker by setting some stuff on the server: http://www.jcornelius.com/articles/solving-ie-image-flicker/ Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FF MSIE background positioning problem
Terry O'Leary wrote:
Hi
I've been working on my company site www.arcolectric.co.uk/index2.html
and have designed it in pure CSS.
I have a background img assigned to the body element with a slight
fade, and a div that contains a background image of the menu bar along
the top, i need the background of the menu bar to line up to the
bodies background.
I've discovered that i have a problem with the mast head being
rendered differently in different browsers. On windows in IE the page
displays perfectly, but in firefox/safari on a mac a top margin of
around 7px appears in the div with the menu bar and so pushes the
alignment of the backgrounds out.
I currently have the following CSS for the menu and the body:
#banner_Distribution{
margin:auto;
margin-top:0px;
width:800px;
height:90px;
padding:0px;
padding-right:2px;
background:url(_images/banner_bg_agents.jpg) 0px 0px no-repeat;
}
body{
margin:0px 0px;
width:100%;
background:url(_images/main_body_bg.jpg) 0px -18px repeat-x;
padding:0px;
}
any one have any ideas, i've noticed if i surround the menu bar with a
border the problem fixes itself and have tried various solutions to no
avail HELP!
Terry,
The page appears identical to me in IE and FF. Did you fix it?
However, I have a few suggestions for you.
1. If adding a border fixes a gap, you probably have margin collapsing
going on. Please read the resources on this page:
http://css-discuss.incutio.com/?page=CollapsingMargin
2. Always develop for a good browser like Firefox, Opera, or Safari
first, then worry about IE. 99% of the time, when something looks
perfect in IE and messed up in the others, it is IE that has it wrong
and the others who have it right. You'll spend a lot less time
developing and testing if you build for the standards and then tweak for
IE, since there is usually no way to make good browsers imitate IE's
random and perplexing bugs.
3. Validate your markup and CSS as a first step in debugging. Fixing
your markup will often fix the rendering issues that you see. If it
doesn't, at least you have valid markup now, and you can then move on to
asking for help from a list such as this.
Best,
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS conferences/symposiums
Does anyone know of any CSS conferences/symposiums etc... My boss is very enthusiastic in my efforts to learn, up through now, by myself. He has suggested I attend classes, none of which I can see as being useful at this point, and that I look to see if there are conferences or anything out there for CSS. Anyone know about this? Geoff Krajeski The Taunton Press, Inc. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] List in IE
IE is not showing the bullet or the list. Where am I wrong?
Many thanks.
CSS:
ul {list-style-image: url(graphics/arrow22.gif); margin: 20px 0 0 0; }
ul li { margin: .5em 0 .5em 0; }
Page:
ulli
a href=(EmptyReference!)A/a
/li
li
a href=(EmptyReference!)B/a
/li
li
a href=(EmptyReference!)C/a
/li
li
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS conferences/symposiums
Does anyone know of any CSS conferences/symposiums etc... My boss is very enthusiastic in my efforts to learn, up through now, by myself. He has suggested I attend classes, none of which I can see as being useful at this point, and that I look to see if there are conferences or anything out there for CSS. Anyone know about this? A lot, the question is where on the planet are you? -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Using 100% css with no tables
I have been making a serious effort to not use tables in any of my web projects. However, this one had me stumped (as I am still fairly new) and I used a table inside a div wrapper for the content. Is there another way to do it using only css? If so, please help because I have work related projects like this every day and would like to make the transition to all css for layout. http://www.msbanet.org/regional_meetings/regional_meetings06.htm Thanks, Jeralyn - Talk is cheap. Use Yahoo! Messenger to make PC-to-Phone calls. Great rates starting at 1¢/min. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Displaying page in different resolutions
Is there a way to easily program a site to automatically determine the users resolution? This is primarily for our intranet. We have about half of our users still using a 800x600 resolution and the others 1024x768 or higher. I'm using a container for the content so those users with 1024 or higher have a large blank border. Here is a sample of our intranet http://www.opnetks.org/Information_Technology/Index.cfm. Any suggestions would be appreciated. Chris Audano City of Overland Park Information Technology 913-895-6069 [EMAIL PROTECTED] Director, National Association of Government Webmasters http://www.nagw.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List in IE
On Jul 26, 2006, at 9:51 AM, cj wrote: try putting your image on the li instead of the ul. another possible failure might be that your graphic isn't referenced according to where your css file is. let us know if either of those work for ya. I failed to say it works well in all other browsers. I have noticed that in IE/ MAC the list and the bullets display but outside the table in which they sit. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Using 100% css with no tables
Jeralyn Merideth wrote: I have been making a serious effort to not use tables in any of my web projects. However, this one had me stumped (as I am still fairly new) and I used a table inside a div wrapper for the content. Is there another way to do it using only css? If so, please help because I have work related projects like this every day and would like to make the transition to all css for layout. http://www.msbanet.org/regional_meetings/regional_meetings06.htm Jeralyn, This should be marked up using a table. The first column is region, the second column date, the third column location. CSS is not meant to replace tables. Tables should still be used for marking up data. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Using 100% css with no tables
- Original Message From: Jeralyn Merideth [EMAIL PROTECTED] I have been making a serious effort to not use tables in any of my web projects. However, this one had me stumped (as I am still fairly new) and I used a table inside a div wrapper for the content. Is there another way to do it using only css? If so, please help because I have work related projects like this every day and would like to make the transition to all css for layout. http://www.msbanet.org/regional_meetings/regional_meetings06.htm -- I think the distinction to make is the difference between layout and the display of data. That looks to me like tabular data, so displaying the data in a table is just fine. It could also be considered a list of data, so you may work it into ordered, unordered, or even a definition list if you think the data could be related that way. -- Sam __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Using 100% css with no tables
this is just a mock-up (and quickly done), but perhaps it can give you
a place to start. [no comments on the fast coloring!] :D
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
title)}i{( Test/title
meta http-equiv=content-type content=text/html; charset=utf-8 /
style type=text/css
h2 {
background: tan;
border: 1px solid #00;
}
.date-column {
float: left;
width: 49%;
}
.loc-column {
float: left;
width: 49%;
}
ul,
p {
margin: 0;
padding: 0;
}
li {
border: 1px solid #00;
list-style: none;
margin: 0 0 1em;
padding: 0;
}
.headers:after,
li:after {
clear: both;
content: .;
display: block;
height: 0;
visibility: hidden;
}
/* bs hoop for ie \*/
* html .headers,
* html li {height: 0;}/* */
.region {
background: orange;
font-weight: bold;
padding: .25em 0;
}
/style
/head
body
div class=headers
h2 class=date-columnRegion amp; Date/h2
h2 class=loc-columnLocation/h2
/div
ul
li
p class=regionRegion 2/p
p class=date-columnWednesday, Sept 6/p
p class=loc-columnChillcouthe R-II/p
/li
li
p class=regionRegion 3/p
p class=date-columnWednesday, Sept 7/p
p class=loc-columnChillcouthe R-II/p
/li
li
p class=regionRegion 1/p
p class=date-columnWednesday, Sept 8/p
p class=loc-columnChillcouthe R-II/p
/li
li
p class=regionRegion 13/p
p class=date-columnWednesday, Sept 9/p
p class=loc-columnChillcouthe R-II/p
/li
/ul
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List in IE
do you perhaps have a page we can look at then, so we're not making stabs in the dark? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Using 100% css with no tables
On 26/07/06, Zoe M. Gillenwater [EMAIL PROTECTED] wrote: Jeralyn Merideth wrote: I have been making a serious effort to not use tables in any of my web projects. However, this one had me stumped (as I am still fairly new) and I used a table inside a div wrapper for the content. Is there another way to do it using only css? If so, please help because I have work related projects like this every day and would like to make the transition to all css for layout. Very true, (last comment) but you can still improve the markup to make the tables more accessible, using the caption element and summary attribute. Also, use th for table headings in each case and if you want to really go for it use the headers attribute in the table cells to refer to the header id in each case. Make sense Zoe? -- http://www.web-buddha.co.uk http://www.projectkarma.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Displaying page in different resolutions
Is there a way to easily program a site to automatically determine the users resolution? This is primarily for our intranet. We have about half of our users still using a 800x600 resolution and the others 1024x768 or higher. I'm using a container for the content so those users with 1024 or higher have a large blank border. Here is a sample of our intranet http://www.opnetks.org/Information_Technology/Index.cfm. Any suggestions would be appreciated. The resolution is pretty useless to know, as you cannot expect all users to run their browser full-screen and not windowed. CSS cannot read any setting, you'd need to use JavaScript for that. Cameron Moll has done a JS that assigns different CSS according to browser size: http://themaninblue.com/writing/perspective/2006/01/19/ -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List in IE
On Jul 26, 2006, at 10:20 AM, cj wrote: do you perhaps have a page we can look at then, so we're not making stabs in the dark? http://www.ombredor.com/css/testing.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Displaying page in different resolutions
Chris, on Wednesday, July 26, 2006 at 15:56 Audano, Chris wrote: Is there a way to easily program a site to automatically determine the users resolution? Why? Make your layout liquid! Just get rid of the width on the container and use some repeating background images instead of fixed ones. Define some margins for the container and a min- and/or max-width. For making this work in IE 7.0 you can use expressions. Al Sparber wrote a tutorial an a DW Extension for things like this: http://www.projectseven.com/tutorials/css/minwidth/index.htm regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Using 100% css with no tables
Dave Goodchild wrote: On 26/07/06, *Zoe M. Gillenwater* [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: Jeralyn Merideth wrote: I have been making a serious effort to not use tables in any of my web projects. However, this one had me stumped (as I am still fairly new) and I used a table inside a div wrapper for the content. Is there another way to do it using only css? If so, please help because I have work related projects like this every day and would like to make the transition to all css for layout. Very true, (last comment) but you can still improve the markup to make the tables more accessible, using the caption element and summary attribute. Also, use th for table headings in each case and if you want to really go for it use the headers attribute in the table cells to refer to the header id in each case. Make sense Zoe? I didn't say not to use these elements. I just didn't go into the details of how to mark up a table because that's not on-topic for this list. If someone wants those details, I've written a pretty extensive article about it: http://www.communitymx.com/abstract.cfm?cid=0BEA6 I think Jeralyn has gotten the point that table markup is appropriate here. Jeralyn, if you need more info about the markup, please see another list. If you want to know how to style the markup once you have it written, please post that here. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FF MSIE background image problem
Terry O'Leary wrote: www.arcolectric.co.uk/index2.html I've discovered that i have a problem with the mast head being rendered differently in different browsers. On windows in IE the page displays perfectly, but in firefox/safari on a mac a top margin of around 7px appears in the div with the menu bar and so pushes the alignment of the backgrounds out. any one have any ideas, i've noticed if i surround the menu bar with a border the problem fixes itself and have tried various solutions to no avail HELP! You are describing /one way/ to solve 'collapsing margins'[1], although I can't see the problem at my end and can't recommend which of the many fixes to use. Apart from that, you have triggered the 'em font-resizing bug'[2] in IE/win. Your layout is also clearly not prepared for any degree of font-resizing in any browser, and those menu-links get pushed out of alignment. regards Georg [1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins [2]http://www.gunlaug.no/contents/wd_additions_13.html -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List in IE
On 7/26/06, faramineux [EMAIL PROTECTED] wrote: http://www.ombredor.com/css/testing.html i see the bullets just fine on winxp pro sp2 ie6. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List in IE
On 7/26/06, faramineux [EMAIL PROTECTED] wrote:
IE is not showing the bullet or the list. Where am I wrong?
Many thanks.
CSS:
ul {list-style-image: url(graphics/arrow22.gif); margin: 20px 0 0 0; }
ul li { margin: .5em 0 .5em 0; }
Hi, faramineux,
It is difficult to tell exactly the issue without a test page. My
first guess is that, since the left margins are removed from the list
and the list items, there is no room to show the bullet on the left
side of the list. It could also be that the image URL is pointing to
the wrong location, if the graphics directory is not in the same
directory as the stylesheet itself. Or that there are negative margins
in the list's container that is cutting off the edge of the list.
If you can provide a link, it will be much easier to say for certain.
Thanks,
Michael
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] wrapping
Pretty basic question: if you had an image floating right and a paragraph of text floating left, what's the best way to stop the text wrapping if it exceeds the height of the image? Can you do this without adding extra text? img src=image.gif alt= width=1 height=1 border=0 style=float:left; p style=float:right your text here /p __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] wrapping
Paul Collins wrote: Pretty basic question: if you had an image floating right and a paragraph of text floating left, what's the best way to stop the text wrapping if it exceeds the height of the image? Can you do this without adding extra text? img src=image.gif alt= width=1 height=1 border=0 style=float:left; p style=float:right your text here /p Just don't float the paragraph. -- Els http://locusmeus.com/ http://locusoptimus.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] wrapping
First, you don't need to float the test right. Give the text a left margin equal to the width of the image. -- Joel Goldstick www.columbuswebmakers.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS conferences/symposiums
http://css-discuss.incutio.com/?page=EventsWorldwide -- Jan Brasna :: www.alphanumeric.cz | www.janbrasna.com | www.wdnews.net __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List in IE
Hi, faramineux, It is difficult to tell exactly the issue without a test page. My first guess is that, since the left margins are removed from the list and the list items, there is no room to show the bullet on the left side of the list. It could also be that the image URL is pointing to the wrong location, if the graphics directory is not in the same directory as the stylesheet itself. Or that there are negative margins in the list's container that is cutting off the edge of the list. If you can provide a link, it will be much easier to say for certain. Thanks, Michael Michael and CJ, The problem was actually in the fact that I had not set a fixed dimension for the right cell of the table, it was squeezing out the cell in which the menu was, on the left of the table. Thanks! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Testing for IE 5 and Below
On 7/26/06, David Laakso [EMAIL PROTECTED] wrote: Dean Champeau wrote: Hello. If you mean what you have is xp ie6, you could download standalone versions of ie501sp2_nt.zip and ie55sp2_nt.zip from here http://browsers.evolt.org/?ie/32bit/standalone. Be advised that conditional comments get messed up, because the system thinks all versions are the highest installed version - which would be 6. -- Tom Livingston | Senior Multimedia Artist | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] span/span image layover making links not work
Magenta Placenta wrote:
http://www.matthickerson.com/recent/barley/
http://www.matthickerson.com/recent/barley/stylesheet.css
In Firefox and Opera, the latest news links don't work, but
they do in IE
6. What I'm doing is displaying the text, then overlaying a
header graphic of that text:
div id=home_latestnews
h2span/spanLatest News/h2
div#home_latestnews h2 span
{
background:url(images/home_latestnews.gif) no-repeat;
position:absolute;
width:100%;
height:100%;
}
When I take out the span tag, the links work, so that's the
problem, anyone know why and how to fix without just removing
the spans?
It's the width:100%; and height:100%.
Give that span a border (or take out the no-repeat on the image)
and you'll see the problem.
--
Els
http://locusmeus.com/
http://locusoptimus.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Testing for IE 5 and Below
Gee Dean... thanks for making the new guy jealous. My fiance isn't going to be happy about you tempting me to blow our honeymoon cash on an upgrade of my current Powerbook. ;-) - Cliff On Jul 26, 2006, at 2:07 PM, Dean Champeau wrote: Now that I think about it, I might have an ideal testing environment, because I use an Intel-based Macintosh running Parallel Workstations, which allows me to set up multiple virtual machines running as distinct computers with their own OS etc. So I could have setup virtual machines for IE 5, IE 5.6 and IE 6, among others. I think I'm going to give that a try. Thanks for your help, guys. -- Dean Champeau On Jul 26, 2006, at 12:57 PM, Tom Livingston wrote: On 7/26/06, David Laakso [EMAIL PROTECTED] wrote: Dean Champeau wrote: Hello. If you mean what you have is xp ie6, you could download standalone versions of ie501sp2_nt.zip and ie55sp2_nt.zip from here http://browsers.evolt.org/?ie/32bit/standalone. Be advised that conditional comments get messed up, because the system thinks all versions are the highest installed version - which would be 6. -- Tom Livingston | Senior Multimedia Artist | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Site Check
Thanks in advance for any comments or suggestions: http://www.toddsilverdesign.net/ --Todd __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE Whitespace to right of absolutely positioned div
I have a site where I've stripped out truckload of tables and even tried to protect again some font size variation. It looks good (i.e. works) in FF 1.5 and Opera 9, but hey ho, there's a 2px wide gap in IE. Here's a link to a simplified version www.kuroi.co.uk/testing/ITC. If anybody can tell me what's going on and how I can prevent this, I'd be eternally grateful. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Divs not giving a scroll bar
I have a problem with a div not giving me a scroll bar in NS7, Mozilla1, and
Opera 9. Works great in IE5 and IE6 on Win98.
Can someone point me to a GOOD article on using scroll bars in divs that works
cross-browser. My research on Google indicates scroll bars are very iffy and
very browser dependent.
CODE:
#content
{
background-color: #E1F0FF;
position: relative;
float: right;
top: 15px;
left: -20px;
width: 450;
height: 400;
overflow-x: hidden;
overflow-y: auto;
white-space: wrap;
border: 3px inset white
}
Don Miller
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.10.4/399 - Release Date: 7/25/2006
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS validation question
When validating css at http://jigsaw.w3.org/css-validator/, do you want to include the web site URL (like you'd pull up in a browser) or the URL for the css stylesheet itself? Either or will work. I checked both of them and both give you the same colour warnings, which can be safely ignored (and isn't considered essential for validation -- you'd kill yourself if you tried to clean up every warning every time when it comes to colours). Validating the page itself (and not the CSS file) comes up with 1 error, which I assume is on the page itself and not the CSS file. The difference between the two is that validating the CSS file will validate that file and only that file, while validating the page itself will validate the CSS file as well as any CSS styles you may have used on the page. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS conferences/symposiums
at this point, and that I look to see if there are conferences or anything out there for CSS. Anyone know about this? This one might be interesting: http://www.refresh06.com/schedule/ Also, this list keeps track of about any upcoming events that are Web related: http://www.d.umn.edu/itss/support/Training/Online/webdesign/events.html Janet __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Whitespace to right of absolutely positioned div
On 7/26/06, Peter [EMAIL PROTECTED] wrote: I have a site where I've stripped out truckload of tables and even tried to protect again some font size variation. It looks good (i.e. works) in FF 1.5 and Opera 9, but hey ho, there's a 2px wide gap in IE. Here's a link to a simplified version www.kuroi.co.uk/testing/ITC. If anybody can tell me what's going on and how I can prevent this, I'd be eternally grateful. just a guess. No time to peek. http://www.positioniseverything.net/explorer/threepxtest.html HTH -- Tom Livingston | Senior Multimedia Artist | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List in IE
On 26.07.2006 15:40, faramineux wrote:
IE is not showing the bullet or the list. Where am I wrong?
Many thanks.
CSS:
ul {list-style-image: url(graphics/arrow22.gif); margin: 20px 0 0 0; }
ul li { margin: .5em 0 .5em 0; }
Because you are using a left margin of 0px,
MSIE/PC won't display the bullets, I guess.
http://meyerweb.com/eric/css/list-indent.html
Regards,
Uwe Kaiser
--
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Whitespace to right of absolutely positioned div
Tom Livingston wrote: On 7/26/06, Peter [EMAIL PROTECTED] wrote: I have a site where I've stripped out truckload of tables and even tried to protect again some font size variation. It looks good (i.e. works) in FF 1.5 and Opera 9, but hey ho, there's a 2px wide gap in IE. Here's a link to a simplified version www.kuroi.co.uk/testing/ITC. If anybody can tell me what's going on and how I can prevent this, I'd be eternally grateful. just a guess. No time to peek. http://www.positioniseverything.net/explorer/threepxtest.html Nope - it's only 1px, and it's a gap between a relative positioned parent, and an absolute positioned child. It only happens when the absolute positioned child has a right value (of 0). When positioning it to the left, there is no 1px gap. Haven't seen it before myself, but it seems to be a rounding problem. If you give the parent a width in pixels, the gap disappears. If you leave the width on auto or a percentage, dragging the window's side to the left pixel by pixel, will see the gap play hide and seek. Workaround for your page: give #searchBar a right value of -1px. The 1px you lose in the other browsers will go unnoticed. -- Els http://locusmeus.com/ http://locusoptimus.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Freaky Win/IE disappearing/reappearing text?
On 7/26/06, Cliff Pruitt [EMAIL PROTECTED] wrote about http://dev.josegomez.com/apps/bbs/thread_list_view.asp?l1id=2: The problem is that on IE the page will load but a large portion of text will just be invisible. If you scroll the window so that the missing portions are out of the viewport and then scroll back up (causing IE to re-draw the content within the window) the missing text appears just fine. If you refresh, the text goes missing again until you scroll. Have any of you folks run into this before? Indeed we have! Welcome to the wacky world of layout issues in IE. This one sounds like the Peekaboo bug: http://www.positioniseverything.net/explorer/peekaboo.html This comes from a IE-specific property named hasLayout -- more information about this comes from here: http://www.satzansatz.de/cssd/onhavinglayout.html HTH, Michael __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Site squashed up in IE 5s
I installed IE 5.01 and IE 5.5 stand alone browsers, followed the advice given on how to set them up properly and they seem to load up ok. I tested out the site that I recently finished, that worked fine in IE6 and FF, and find that both IE5.01 and IE 5.5 render the site very wrong. The main text is squashed up to the left side in to a narrow column, the left nav panel is split apart and the pages won't scroll down when they need to. I'm not sure whats going on so could someone please take a look and give me some advice as to what is happening? The site is here http://www.singingschool.org.nz/index.html Thanks so much. Pat __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Browser handler div scrolling differently
Don Miller wrote: http://www.dgmservices.com/test/iframe.html http://www.dgmservices.com/test/div-test.html The above are two test pages. The div-test shows odd results for different browsers. Works great in IE5 and IE6 on Win 98 but does different things in NS7, Mozilla, and Opera. Use 'overflow: auto;' instead of 'overflow-x: hidden; overflow-y: auto;' if you want cross-browser reliable results. The outcome is the same in IE/win. Any ideas if this can be easily made to work in multiple browsers or is iframes the best cross-browser solution? Different solutions for different situations. If you want to get through in all browsers, then a scrollable div is the best option. I tend to avoid scrolling elements in pages - unless there's no other option within a given space, since browsers have a perfectly good scrolling-mechanism of their own for ordinary layouts. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site squashed up in IE 5s
Pat wrote: I tested out the site that I recently finished, that worked fine in IE6 and FF, and find that both IE5.01 and IE 5.5 render the site very wrong. http://www.singingschool.org.nz/index.html You're experiencing the differences between 'Quirks mode' and 'Standard mode'. IE6 can run in either mode, but older IE-versions have nothing but 'Quirks mode' to offer so you'll have to hack them. See: http://www.w3.org/International/articles/serving-xhtml/ ...for a bit more on 'standards' vs. 'quirks' modes. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] div spacing problem
I seem to be having a problem with div's vertical spacing. The following web page works properly in IE but not FF, NS, and Opera. http://angray.members.beeb.net/Examples/CSS/test.html The CSS is in the HTML header. Basically the #header should be 80px in height, on IE it is, but other browsers are inserting extra line space, effectively creating another lines worth. This is what I want it to look like :- http://angray.members.beeb.net/Examples/CSS/test.png And this is what I am getting on FF :- http://angray.members.beeb.net/Examples/CSS/wrong.PNG It is obviously something very simple but I have been looking at it for hours with no solution. If someone could explain why it is different on other browsers and suggest a fix to solve the problem. Many thanks in advance, Aaron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] div spacing problem
Aaron Gray wrote:
I seem to be having a problem with div's vertical spacing.
Basically the #header should be 80px in height, on IE it is, but other
browsers are inserting extra line space, effectively creating another lines
worth.
I think you have discovered browser inconsistency with regards to the
Box Model (see http://css-discuss.incutio.com/?page=BoxModel for a far
more detailed explanation than I could give you). I am assuming you are
looking at IE6 as I think IE7 has corrected this issue.
Basically, IE6 (wrongly) includes any padding and borders in its notion
of the specified height (or width) of an element - in your case you have
specified an 80px height for your #header, which IE thinks *includes*
the 40px padding-top.
Firefox (and other good browsers) correctly add the 40px padding-top to
the 80px height of the div, thereby rendering all that extra space
underneath the text.
You could hack the CSS for #header to feed a different height to each
browser (see http://css-discuss.incutio.com/?page=BoxModelHack ) but it
is probably better to convert the padding-top on #header to a margin-top
on the contained elements. span won't do it because it is an inline
element, but you could use p or h1 (which may be more semantically
correct anyway), or add {display : block} to the css for span. With no
padding, there is no problem with your height specification for #header.
Hope this helps.
D#
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] div spacing problem
I seem to be having a problem with div's vertical spacing. The following web page works properly in IE but not FF, NS, and Opera. http://angray.members.beeb.net/Examples/CSS/test.html The CSS is in the HTML header. Basically the #header should be 80px in height, on IE it is, but other browsers are inserting extra line space, effectively creating another lines worth. This is what I want it to look like :- http://angray.members.beeb.net/Examples/CSS/test.png And this is what I am getting on FF :- http://angray.members.beeb.net/Examples/CSS/wrong.PNG It is obviously something very simple but I have been looking at it for hours with no solution. If someone could explain why it is different on other browsers and suggest a fix to solve the problem. Many thanks in advance, Aaron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] div spacing problem
David Sharp wrote: I think you have discovered browser inconsistency with regards to the Box Model (see http://css-discuss.incutio.com/?page=BoxModel for a far more detailed explanation than I could give you). I am assuming you are looking at IE6 as I think IE7 has corrected this issue. My bad - IE6 strict also gets the box model correct. In the case in point the lack of doctype declaration throws the browser into quirks mode. D# __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] div spacing problem
Aaron Gray wrote: The following web page works properly in IE but not FF, NS, and Opera. http://angray.members.beeb.net/Examples/CSS/test.html Basically the #header should be 80px in height, on IE it is, but other browsers are inserting extra line space, effectively creating another lines worth. Aaron This is /one/ way of doing something like that: http://www.chelseacreekstudio.com/ca/cssd/layout18.html -Make sure you a have a doctype -Use percent or em as a unit of measure for specifying fonts on the screen. Best, ~dL -- http://chelseacreekstudio.com/ca/ccs/pow/pow.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
