Re: [css-d] Browser Check - Problems with I.E. 6.0 and below ?? help!
[EMAIL PROTECTED] wrote:
However what I am still getting is in IE 7.0 under the user log in
box on the left hand side, there is a picture and sign up text,
however this does not show up in IE 6.0 ??
Try adding a 'hasLayout'[1] trigger...
#sign_in_div {width: 96%;}
Finally when I tested the page with browsershots.org on safari 2.0 on
mac, there are problems with the main navigation and header .
No problems whatsoever in my Safari.
Can't see any differences between Safari 2.0.4 and Firefox 1.5.x/2.x -
other than that the non-existing images show up differently.
http://www.food.thfctalk.com/test.html
Generally: there are a few weak spots in that layout when font-resize or
'minimum font size'/'ignore font size' is applied. Some overlapping and
overshooting text in the good browsers, and expansion in IE/win.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Webpage check please!!
Hi list, I would appreciate a Cross browser check and help with overcoming left column, navigation, alignment and possible padding margin problems. Ideally I would like the menu to be sitting more to the left ... BUT still have the tabs overlapping the green box. Files can be accessed athttp://users.ncable.net.au/~keno2 FF - Looks ok except for menu alignment Opera - The same as FF IE - is a mess!! .. 8-( Thanks in advance, Keno. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Horizontal Tabbed Navigation Newspaper Websites
Hello list. This is my first post, but I have been subscribed and enjoying this list for quite sometime. I work in online newspaper publishing. I'd like to gage some wise opinion from anyone who's interested on tabbed horizontal navigation systems for large publishing sites? Reasons I ask is we're trying to improve our own going forward, to be accessible, usable, intuitive and of course pretty. To cut to the chase what are peoples opinion of the following navigation systems: NYTIMES http://www.nytimes.com/pages/world/index.html Here there is two steps to get to a section under US news. INDY UK http://news.independent.co.uk Here it is full of javascript but it takes 1 step to get to a section under Sport for example. Open questions, open opinions very welcome. Kind Regards Ruairi __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] height of a div in a table cell
Hi,
I have two questions about a div in a table cell.
- The first is of the general kind: Can anyone explain why when I'm
specifying a height of 100% for the div without any content in a TD that
has a height 0, why then the height of the div becomes 0. I was under
the impression that it should have the height of its containing block,
in this case of the TD. However, as in both IE7 and Firefox in stric
mode both boxes have 0 height, so I guess it is meant to be like this.
Can anyone point me how this is explained. Also and this is my problem,
how can I force the box to have the height of the cell? (See below HTML
table 1)
- If I insert a second div inside the first one, both boxes have a
height of 0 in both browsers. However, if I assign any height in
percentage to the inner div, IE7 will expand the height to 100% of the
table.. Not only does it look at its ancestor's ancestor for the height
(I guess this is along the line that is described in
http://www.positioniseverything.net/explorer/percentages.html) but it
also does not even take the percentage in account. I guess this is a
bug? See below HTML table 2)
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html
head
titleUntitled/title
style type=text/css
!--
table {table-layout:fixed;border-collapse:collapse;width:100%}
td {border:1px solid black;}
.test {border:1px solid red;height:100%;display:block;}
.test1 {border:1px solid green;height:10%}
--
/style
/head
body
table cellspacing=0 cellpadding=0
tr
td1/td
td
div class=test
div class=test1
/div
/div
/td
/tr
/table
/body
/html
Thanks and regards,
Tim
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] IE7 layout issue
Hi all - I built the following site to render in FF and tested in IE6/Opera/Safari, all good, but have just downloaded IE7 and am experiencing further IE woes. Anyone have any idea of new IE7 bugs that are causing the header to spill down into the nav? http://www.dontjustsitthere.co.uk/ many thanks in advance! -- http://www.web-buddha.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Block Anchor Scrollbar
Test case:
http://cim.szm.sk/blockAnchor.html
Dragging a scrollbar of a block anchor is not possible as expected in
FireFox 2, because link's drag-and-drop operation is started. It works
fine in IE6, IE7 or Opera 9.
Any ideas or solutions? Thank you!
--
{U}() Michal Cizmazia
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Webpage check please!!
Hi Ken. You have several errors in your CSS that may be causing problems and should be corrected before troubleshooting further. 1) Run it through the CSS validator at http://jigsaw.w3.org/css-validator/and correct the problems found (note that the warning about the dropcap class refers to times new roman) . 2) You'll need to remove or comment out CSS CODE at the top. 3) breadcrumbs is not an element - you probably meant to make it a class or id? Same for column2, vr, and box. 4) Run the validator again fix any problems. 5) Check your site and see what still needs to be tweaked. :-) Andy __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] collapsing div and margin problems in safari +ie 6-
Ingo Chao wrote:
Gunlaug Sørtun wrote:
Noah Learner wrote:
http://www.learnerdesign.com/acufamily/test5.html
Safari's collapsing seems to be a tougher nut to crack. My version
(2.0.4) doesn't like the 'overflow: hidden' on #main_body, but it
doesn't do well without it either. Potential fixes seems to disturb
various other browser. Someone else may figure out the exact cause
and
fix for Safari's erroneous behavior.
Didn't see the exact cause. It is fixed in Webkit nightly build.
Didn't
search in bugzilla.
your code:
#main_body
__#main_content
#shell
When I remove the float from shell, it looks ok for the moment in
Safari. Maybe there are not enough heights specified to work on. Not
good, as float is probably needed to contain various things in
#shell on
other pages.
Force #main_content to stay up by adding a clearing element in it:
#main_content::after {
clear:both;
display:block;
content:[...];
visibility hidden;
height:0;
}
Optional:
additionally, if you don't have plans to do anything more complicated
with the left-hand navigation column, there is no need, I think to
float #navul.
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Problem with Firefox floating
David Van O wrote: I've been using the book 'css mastery' to learn the floating method for fluid 3 column sites but cannot workout why this site works well in ie7 but not in firefox. Not sure whether it's in my styles or otherwise. RE: www.aiddogs.com.au/shadowsite David, the page looks a lot better this morning than it did last night. And unless I am missing something, I see no significant difference among ie and ff and opera. The long-word (link) in the left column, and the wide (blue image) in the center column may be contributing to float drop in ie/6 and ie/7 (particularly with font-scaling). You need a background-color (not everyone defaults to white), and it would be a good idea to validate the markup.The inline styles could be moved to the css file. David Regards, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Problem with Firefox floating
To validate the xhtml make these changes:
1.body topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0
marginwidth=0 marginheight=0
remove these attributes and move into css:
body {margin:0;}
2. Place the links inside mainNav into an unordered list (not
necessary to validate but
semantically more useful and provides the ability to style the links
inside later)
3.
div id=grey_background
...try not to use presentational descriptions in the html - it says
what the div looks like, not
what it means
4.
div id=display_left
...see above
5.
h2 align=center
move to css
h2 {text-align:center;}
This should give you an idea of how to clean up the markup. Move all
presentation into the css, and
leave yourself with clean, meaningful html that can be styled however
you like. And lose
the font tag!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Webpage check please!!
ken organ wrote:
I would appreciate a Cross browser check and help with overcoming
left column, navigation, alignment and possible padding margin
problems.
Ideally I would like the menu to be sitting more to the left ... BUT
still have the tabs overlapping the green box.
http://users.ncable.net.au/~keno2
The following addition (or corrections) should give you a quite
cross-browser reliable layout...
#menu {width: 140px; height: auto; float: left; }
#nav {position: relative; width: 140px; float: left; margin: 0 -20px 0 0;}
#nav ul {margin: 10px 0 0 20px; padding: 0;}
#nav ul li {margin-bottom: 6px;}
#block {width: auto;}
It's tested in Firefox 2.x, Opera 9.x, Safari 2.x and IE6.
Notes:
- IE6 can't handle overflow/overlapping correctly, so I have styled in
nested floats, negative back-side margins and stacking-corrections for
it - in a way other browsers understand perfectly.
- ul#nav doesn't exist, so I have styled the correct #nav ul instead.
- Lists must have both margins and paddings declared for cross-browser
reliable results. That's basically because not all browsers use the same
property for defaults.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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 2.1 computed value question
Hi, In the CSS 2.1 Working Draft, individual margin properties have computed value is stated as: the percentage as specified or the absolute length (margin property is an example, other properties have similar computed value) The specification also states that pixel lengths are relative lengths, since they can be scaled. Relative length units specify a length relative to another length property.. Pixel units are relative to the resolution of the viewing device.. From the above, it sounds like pixels wouldn't be a computed value since they are relative. Isn't the computed value converted to pixels for a computer screen? I'm a bit confused, does the absolute length also include pixels? References: http://www.w3.org/TR/CSS21/box.html#margin-properties http://www.w3.org/TR/CSS21/syndata.html#absrel-units __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] irregular float drop in IE7
Gunlaug Sørtun wrote:
Zoe M. Gillenwater wrote:
It happens to the white box labeled HSRC Project Areas here:
http://www.hsrc.unc.edu/index.cfm
It occurs in both IE6 and IE7, but in IE6 when it drops it
immediately jumps back up, but in IE7 it stays dropped until you
refresh again.
Just a suggestion, as I can't be sure since it's too inconsistent in my
IE6 on line - and doesn't happen at all for a local copy.
I would add...
#project-areas-inner {width: 100%;}
...or...
#project-areas-inner {width: 470px;}
...so the float-width isn't depending entirely on the width of the
image. Without the image the #project-areas-inner float bocomes narrower
in all browsers - as it should, and knowing how erratic IE/win is with
calculations and timing, a declared width may help stiffen it up a bit.
I've added width: 100%, and I can no longer get the drop to happen in
IE7 or IE6. Can anyone else confirm?
Thanks as always Georg!
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
IE7 information -- 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] IE6 browser error is there a fix?
http://www.ckfswebservices.com/mcbtest/ Looked at my test site in all the flash browsers at browser cam Only problem is AOL 9.0 and explorer 6 in windows 2000 and explorer 6 on windows XP where the picture in the right hand column drops to the bottom of the column. Other browsers work. Client wants the picture at the top and of course he has IE6. I do not understand what part of the buggy IE6 browser is causing the picture in the right column to drop down. FYI This site is designed for 1024 as per the client's specs. Any help here greatly appreciated. My understanding is IE6 hacks break the newer browser is that right??? But even if I wanted to I don't know the IE6 hack to fix this. Thanks, Carol F. Swinehart __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] irregular float drop in IE7
Zoe M. Gillenwater wrote: Gunlaug Sørtun wrote: Zoe M. Gillenwater wrote: http://www.hsrc.unc.edu/index.cfm I've added width: 100%, and I can no longer get the drop to happen in IE7 or IE6. Can anyone else confirm? Thanks as always Georg! Zoe OK here: xp ie/7.0 and ie/6.0 (standalone). And it is no longer dropping on loading at text-size 'largest.' ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] OT - List digest
I'm sorry to send this to everyone, but I changed my list options to digest instead of individual because the list is SO active...but I am still getting individual mailings. How do I stop this? I don't want to unsub, just want to read mail from the site. Thanks, Jeralyn Bored stiff? Loosen up... Download and play hundreds of games for free on Yahoo! Games. http://games.yahoo.com/games/front __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] ADMIN Re: OT - List digest
Jeralyn Merideth wrote: I'm sorry to send this to everyone, but I changed my list options to digest instead of individual because the list is SO active...but I am still getting individual mailings. How do I stop this? I don't want to unsub, just want to read mail from the site. Normally I would send this sort of message off-list, but the whole list is probably due for a reminder that administrative emails about the list should never be sent to the list itself. The welcome message that you got when you signed up, and the list wiki, specify that you should email [EMAIL PROTECTED] with such matters. Any time you feel the need to mark your message OT or write I know this is off-topic..., immediately stop and do not send your message to the list. Knowing your message is off-topic does not make it excusable to send it anyway; in fact, it probably makes it worse, as you know you are violating list policy. If you are in doubt whether something is off-topic, you can always email [EMAIL PROTECTED] to ask, or you can check our wiki page on the topic for clarification and places to take your question elsewhere: http://css-discuss.incutio.com/?page=OffTopic Again, this isn't to pick solely on Jeralyn, but as a reminder to everyone. To answer Jeralyn's question, you can change your subscriber options by signing in at this page: http://www.css-discuss.org/mailman/listinfo/css-d/ (Don't be dismayed if you log in and see you've gotten a bounce or two. This is normal.) Thanks everyone for your cooperation that makes our list such a civil place and useful tool. Zoe Gillenwater css-d list moderator __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] IE6 browser error is there a fix?
Carol F. Swinehart wrote:
http://www.ckfswebservices.com/mcbtest/
Only problem is AOL 9.0 and explorer 6 in windows 2000 and explorer 6
on windows XP where the picture in the right hand column drops to
the bottom of the column. Other browsers work.
You can fix that problem in IE6 by adding...
* html #right {width: 340px; overflow-x: hidden; margin-left: 630px; }
* html #right img {position: relative;}
...after the existing styles.
AOL 9.0 uses the same buggy engine as IE6 AFAIK, and should get the same
corrections.
[...] My understanding is IE6 hacks break the newer browser is that
right???
Depends on method. The old '* html' hack doesn't break anything in newer
browsers - not even in IE7 as long as it is in 'standard mode', since
they don't recognize '* html' at all and will therefore ignore the
entire fix.
Additionally:
There are a couple of errors in your source-code. Those should be
corrected since gambling on browsers error-correction mechanisms isn't
a reliable method :-)
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] disappearing content on text resize
I added some padding to the bottom of the #header, and that seemed to do it. Any thought on how to make the menu item borders grow as the text sizes increase? vicki = When I make the text size larger in IE7 and FF 2.x (the only browsers I have at the moment), the content of the divisions beneath the header seem to go under the header image. The header division is #header The disappearing content are in #contentmain and #contentright Vicki __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] disappearing content on text resize
Vicki Smith wrote:
I added some padding to the bottom of the #header, and that seemed to
do it. Any thought on how to make the menu item borders grow as the
text sizes increase?
Something like...
#contentright .wireframemenu {width: 10em; overflow: hidden;}
...will do. Set width-value to taste, and watch out for float-drop in IE6.
Got the following [off-list] ...
-
Vicki Smith wrote:
web address: http://www.coffeecrone.com/index.htm
When I make the text size larger in IE7 and FF 2.x (the only browsers
I have at the moment), the content of the divisions beneath the
header seem to go under the header image.
The header division is #header The disappearing content are in
#contentmain and #contentright
Looks like you have corrected that, but anyway...
It's the declared height on #contentheader that's troublesome, since the
header image may overflow that declared height and cover the top of
following elements.
Deleting that height will let the header grow in height when necessary,
and make sure any cover-up never happens. (The added padding doesn't
hurt though.)
Also: your page is triggering the 'em font-resizing bug' in IE6...
http://www.gunlaug.no/contents/wd_additions_13.html
...creating float-drops.
The addition of...
html {font-size: 100%;}
...will fix that bug.
--
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Horizontal Tabbed Navigation Newspaper Websites
Ruairi Doyle wrote: Hello list. This is my first post, but I have been subscribed and enjoying this list for quite sometime. Welcome Ruairi! I work in online newspaper publishing. I'd like to gage some wise opinion from anyone who's interested on tabbed horizontal navigation systems for large publishing sites? Reasons I ask is we're trying to improve our own going forward, to be accessible, usable, intuitive and of course pretty. To cut to the chase what are peoples opinion of the following navigation systems: NYTIMES http://www.nytimes.com/pages/world/index.html Here there is two steps to get to a section under US news. INDY UK http://news.independent.co.uk Here it is full of javascript but it takes 1 step to get to a section under Sport for example. Open questions, open opinions very welcome. Unfortunately, only open questions and open opinions on CSS are welcome on this list. Everyone is free to comment on the merits and disadvantages of various CSS methods for creating horizontal lists in this thread, but it's not ok to talk about accessibility, usability, or aesthetics here (at least not in and of themselves). If you want to make a comment along those lines, please do so to Ruairi off-list. Ruairi, you'll probably have better luck finding the opinions and information you seek from a more broad list like webdesign-l or thelist. See our wiki page for more options: http://css-discuss.incutio.com/?page=OffTopic Thanks, 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 IE7 information -- 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] height of a div in a table cell
[EMAIL PROTECTED] wrote: - The first is of the general kind: Can anyone explain why when I'm specifying a height of 100% for the div without any content in a TD that has a height 0, why then the height of the div becomes 0. I was under the impression that it should have the height of its containing block, in this case of the TD. However, as in both IE7 and Firefox in stric mode both boxes have 0 height, so I guess it is meant to be like this. Can anyone point me how this is explained. Also and this is my problem, how can I force the box to have the height of the cell? (See below HTML table 1) But, your td does *not* have a height 0. That is, it doesn't have any assigned height at all. Yes, it has a computed height, as every element does, but percentage heights are based off of the assigned heights of their ancestors. Without a height assigned to the td, a nested div inside with a percentage height is just going to collapse. - If I insert a second div inside the first one, both boxes have a height of 0 in both browsers. However, if I assign any height in percentage to the inner div, IE7 will expand the height to 100% of the table.. Not only does it look at its ancestor's ancestor for the height (I guess this is along the line that is described in http://www.positioniseverything.net/explorer/percentages.html) but it also does not even take the percentage in account. I guess this is a bug? See below HTML table 2) Yes, a bug. Again, assigning explicit heights will help you 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 IE7 information -- 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] What is the best method of linking to different style sheets - e.g. type bigger for accessibility?
http://www.neilp.newwavemedia.co.uk/index.html (url) http://www.neilp.newwavemedia.co.uk/stylefile/style1.css (css) Hi all, In my simple little head I was going to duplicate the site, changing the pages from e.g. index1.html to index2.html and so on. Having done this link site2 to style2.css. However I have been looking about, because this must be a time and space consuming task for something as little as changing type from 70% to 80%, and found some stuff that I don't understand. div id=access_buttons pspan class=topnavlink Text size:/spannbsp;span class=topnavlink_sma href=NEED_SMALL_STYLE_SHEET_HERE title=Make the text size smallA/a/spannbsp;span class=topnavlink_mda href=NEED_MEDIUM_STYLE_SHEET_LINK title=Make the text size normalA/a/spannbsp;span class=topnavlink_lga href=http:// www.neilp.newwavemedia.co.uk/SetStyle.do?style=lg class=lg title=Make the text size largeA/a/span/p /div I have highlighted this line. it is some code that I pinched and tried to customize for my own project. weird thing is the site i got it from only has 2 style sheets. 1 big, 1 small. On the small it contains just the changes - i.e. type difference. But the bit that puzzles me is there are 3 differences on the page and how the hell is this link (stuff that is foreign to me) accessing that page? No worries if the way I am trying is wrong or needs an 'off topic' explanation. I just gave it as an example to show that I am trying - but am really stuck to find a tutorial anywhere on this. Can anyone send useful links? Would be much appreciated as always. Kind regards, Chris Christopher Blake [EMAIL PROTECTED] 07816163420 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] page check :: ~dL
A page check with with whatever you are running is appreciated. http://www.chelseacreekstudio.com/ca/auto/ (embedded) Thanks. ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 check :: ~dL
Hi david safari 2.0.4 running off powerbook G4 - panther res 1440 x 900. Looks good. menu bar under banner has different weights to typefaces. - maybe cos links not in place. top 3 menu items on banner are a little unclear. especially my garge - the red is lost against background. email this page to friend looks a little out of place. apart form those v.minor things - i am jealous. Good job. Best wishes, Chris Christopher Blake [EMAIL PROTECTED] 07816163420 On 12 Jan 2007, at 18:45, ~davidLaakso wrote: A page check with with whatever you are running is appreciated. http://www.chelseacreekstudio.com/ca/auto/ (embedded) Thanks. ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 IE7 information -- 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 check :: ~dL
~davidLaakso wrote: A page check with with whatever you are running is appreciated. http://www.chelseacreekstudio.com/ca/auto/ Gives me a Forbidden message! :-( -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 check :: ~dL
~davidLaakso wrote: A page check with with whatever you are running is appreciated. http://www.chelseacreekstudio.com/ca/auto/ (embedded) Thanks. ~dL Whoops. I discovered a horrendous error and took it down. Back to the drawing board. ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 check :: ~dL
~davidLaakso wrote: ~davidLaakso wrote: A page check with with whatever you are running is appreciated. http://www.chelseacreekstudio.com/ca/auto/ (embedded) Thanks. ~dL Whoops. I discovered a horrendous error and took it down. Back to the drawing board. What level of CSS does a drawing board support? ;-) -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Page check for newbite
My first CSS website. And my first post (hope it's not a duplicate), although I've been trying to follow and learn from the discussions for several weeks. http://www.callibeth.com/index.htm Although this page looks as I want it to in Firefox/PC and IE7/PC, I understand that this page doesn't do well in Safari/MAC -- the first and third letter boxes fall below the viewport, and middle box doesn't show up at all. Any clues as to how to fix it? Any other advice appreciated. I'm afraid my CSS has midstream-project spread. I'm not sure whether I should reference the CSS files. In case yes: http://www.callibeth.com/css/main.css http://www.callibeth.com/css/index.css Regards, Beth Lee Tallahasee, Florida www.callibeth.com callibeth.blogspot.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] 1 in 5 page views floats below in FireFox
Hi there, I have my site working 100% in IE5/6/7/ Opera but in the latest FireFox - v 2.0.0.1 there is a strange problem. For roughly every 5th time i view my home page the content floats below the nav like this - http://www.mediasurgery.co.uk/mediaSBugImage.jpg It only seems to be the home page that does it - http://www.mediasurgery.co.uk/ I tried a fresh install of Firefox on a different pc but the problem happened again. Can anyone help? Thanks for looking. John. ___ New Yahoo! Mail is the ultimate force in competitive emailing. Find out more at the Yahoo! Mail Championships. Plus: play games and win prizes. http://uk.rd.yahoo.com/evt=44106/*http://mail.yahoo.net/uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Trying to find the best webdesign software
Hey all. I currently use Dreamweaver to design my pages but it seems that support for css is minimal. Basic designs are fine, but once I have negative margines and wrappers etc with 2 and 3 columns the page does strange things. My designs look totally different than in the browsers and this makes it frustrating as I have to check the browser too often. I would like it if I could find something that works better. Is there such a package? I'm sure you all have more experience in a lot of different packages, just want to know what the best might be. Or do you use just text editors? Just trying to determine the best method so I can move on. Thanks for your input David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Problem with Firefox floating
David Thanks for the links before, that was what I used to change the page and it works fine. Still learning to keep all styling to css and have clean markup but I'm getting there. Thanks for your help. Dave - Original Message - From: ~davidLaakso [EMAIL PROTECTED] To: David Van O [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: Saturday, January 13, 2007 12:45 AM Subject: Re: [css-d] Problem with Firefox floating David Van O wrote: I've been using the book 'css mastery' to learn the floating method for fluid 3 column sites but cannot workout why this site works well in ie7 but not in firefox. Not sure whether it's in my styles or otherwise. RE: www.aiddogs.com.au/shadowsite David, the page looks a lot better this morning than it did last night. And unless I am missing something, I see no significant difference among ie and ff and opera. The long-word (link) in the left column, and the wide (blue image) in the center column may be contributing to float drop in ie/6 and ie/7 (particularly with font-scaling). You need a background-color (not everyone defaults to white), and it would be a good idea to validate the markup.The inline styles could be moved to the css file. David Regards, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Trying to find the best webdesign software
Hey Ed Thanks for the reply. I use Dreamweaver mostly as a text editor, but it would be nice to see the finished design as well without having to render it to a browser all the time. Just wanted to know if there was anything that does the page rendering more consistently than Dreamweaver. Dave - Original Message - From: Ed Seehouse [EMAIL PROTECTED] To: David Van O [EMAIL PROTECTED] Sent: Saturday, January 13, 2007 8:17 AM Subject: Re: [css-d] Trying to find the best webdesign software On 1/12/07, David Van O [EMAIL PROTECTED] wrote: Hey all. I currently use Dreamweaver to design my pages but it seems that support for css is minimal. Basic designs are fine, ... I would like it if I could find something that works better. Is there such a package? I'm sure you all have more experience in a lot of different packages, just want to know what the best might be. Or do you use just text editors? I use Dreamweaver, but as a text editor. I would never rely on it to create good code. The best software for creating web pages is between your ears. -- Ed Seedhouse __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 check for newbite
For starters, it's a very attractive first css layout. Congrats!
I noticed one thing right away- and I don't think it has anything to do with
the Safari problem you mention.
Your layout scheme for the three columns (defined in index.css) is a little
wonky. If I resize the size of my browser window, the left two boxes/columns
(Calligraphy Book Arts and Art Prints for Sale) stay relatively still,
while the Weddings Celebrations box/column, moves wildly about. The reason
for this can be found in this code:
#col1 {
width: 150px;
left: 330px;
background-image: url(../site_images/A.jpg);
}
#col2 {
width: 150px;
left: 555px;
background-image: url(../site_images/B.jpg);
}
#col3 {
width: 150px;
right: 330px;
background-image: url(../site_images/C.jpg);
}
The problem is that third column is being position relative to the right
side while the other two are relative to the left. What you end up with is a
scenario at certain browser window sizes where the third column obscures one
or both of columns 1 and 2.
Easy fix though, right? All you have to do is position col3 with the left
offset property.
(Was there a specific reason you set it up the way you have it?)
Matt
On 1/12/07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
My first CSS website. And my first post (hope it's not a duplicate),
although I've been trying to follow and learn from the discussions for
several weeks.
http://www.callibeth.com/index.htm
Although this page looks as I want it to in Firefox/PC and IE7/PC, I
understand that this page doesn't do well in Safari/MAC -- the first and
third letter boxes fall below the viewport, and middle box doesn't show up
at all. Any clues as to how to fix it?
Any other advice appreciated. I'm afraid my CSS has midstream-project
spread. I'm not sure whether I should reference the CSS files. In case
yes:
http://www.callibeth.com/css/main.css
http://www.callibeth.com/css/index.css
Regards,
Beth Lee
Tallahasee, Florida
www.callibeth.com
callibeth.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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
IE7 information -- 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] Centering images
I don't know what I'm doing wrong. When I want to center an image I can only
get it to work if I select div align=center. If I use a class
.txtcenter, .center { text-align: center; }
Or #test img { text-align: center; } the image does not center.
Here is my example:
http://www.test.entourage.mvps.org/faq/center_images.html
Why are these simple things so hard for a newbie? sigh
--
Diane
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Trying to find the best webdesign software
Afternoon David You wrote Hey all. I currently use Dreamweaver to design my pages but it seems that support for css is minimal. Basic designs are fine, but once I have negative margines and wrappers etc with 2 and 3 columns the page does strange things. My designs look totally different than in the browsers and this makes it frustrating as I have to check the browser too often. I would like it if I could find something that works better. Is there such a package? I'm sure you all have more experience in a lot of different packages, just want to know what the best might be. Or do you use just text editors? Just trying to determine the best method so I can move on. Thanks for your input David You're likely to get as many different responses to this question as there are members on the list. Personally, I hand code in Word Pad and review early and often in Firefox and IE6 / 7 to keep this sort of on topic, I hand code my CSS the same way The *Best* method is the one that works for you.. You might get better responses on other lists like Webdesign-L. You can find it links to them in the WIKI on the off-topic page [1] Best to you and yours [1] http://css-discuss.incutio.com/?page=OffTopic Jim Nannery www.redfernenterprises.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 check for newbite
Thanks so much. (The specific reason I set it up the way I originally had
it was ignorance :) although I don't have that excuse, really, after going
through Eric Meyer's really excellent book *CSS Web Site Design*.)
I guess that same solution would apply to my wrong-headed layout here?:
http://www.callibeth.com/galleries.htm
Beth
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Matt Dawson
Sent: Friday, January 12, 2007 4:36 PM
To: [EMAIL PROTECTED]; css-d@lists.css-discuss.org
Subject: Re: [css-d] Page check for newbite
For starters, it's a very attractive first css layout. Congrats!
I noticed one thing right away- and I don't think it has anything to do
with
the Safari problem you mention.
Your layout scheme for the three columns (defined in index.css) is a
little
wonky. If I resize the size of my browser window, the left two
boxes/columns
(Calligraphy Book Arts and Art Prints for Sale) stay relatively still,
while the Weddings Celebrations box/column, moves wildly about. The
reason
for this can be found in this code:
#col1 {
width: 150px;
left: 330px;
background-image: url(../site_images/A.jpg);
}
#col2 {
width: 150px;
left: 555px;
background-image: url(../site_images/B.jpg);
}
#col3 {
width: 150px;
right: 330px;
background-image: url(../site_images/C.jpg);
}
The problem is that third column is being position relative to the right
side while the other two are relative to the left. What you end up with is
a
scenario at certain browser window sizes where the third column obscures
one
or both of columns 1 and 2.
Easy fix though, right? All you have to do is position col3 with the left
offset property.
(Was there a specific reason you set it up the way you have it?)
Matt
On 1/12/07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
My first CSS website. And my first post (hope it's not a duplicate),
although I've been trying to follow and learn from the discussions for
several weeks.
http://www.callibeth.com/index.htm
Although this page looks as I want it to in Firefox/PC and IE7/PC, I
understand that this page doesn't do well in Safari/MAC -- the first and
third letter boxes fall below the viewport, and middle box doesn't show
up
at all. Any clues as to how to fix it?
Any other advice appreciated. I'm afraid my CSS has midstream-project
spread. I'm not sure whether I should reference the CSS files. In case
yes:
http://www.callibeth.com/css/main.css
http://www.callibeth.com/css/index.css
Regards,
Beth Lee
Tallahasee, Florida
www.callibeth.com
callibeth.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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 check for newbite
Yeah, it applies on that page too.
Fixed position can be a bit tricky for that very reason. Floats will push
each other out of the way and never overwrite each other, but the same can't
be said for positioned elements. Any time you use positioning, you need to
test (or at least think through) as many conceivable scenarios as possible.
Matt
On 1/12/07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
Thanks so much. (The specific reason I set it up the way I originally had
it was ignorance :) although I don't have that excuse, really, after going
through Eric Meyer's really excellent book *CSS Web Site Design*.)
I guess that same solution would apply to my wrong-headed layout here?:
http://www.callibeth.com/galleries.htm
Beth
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Matt Dawson
Sent: Friday, January 12, 2007 4:36 PM
To: [EMAIL PROTECTED]; css-d@lists.css-discuss.org
Subject: Re: [css-d] Page check for newbite
For starters, it's a very attractive first css layout. Congrats!
I noticed one thing right away- and I don't think it has anything to do
with
the Safari problem you mention.
Your layout scheme for the three columns (defined in index.css) is a
little
wonky. If I resize the size of my browser window, the left two
boxes/columns
(Calligraphy Book Arts and Art Prints for Sale) stay relatively still,
while the Weddings Celebrations box/column, moves wildly about. The
reason
for this can be found in this code:
#col1 {
width: 150px;
left: 330px;
background-image: url(../site_images/A.jpg);
}
#col2 {
width: 150px;
left: 555px;
background-image: url(../site_images/B.jpg);
}
#col3 {
width: 150px;
right: 330px;
background-image: url(../site_images/C.jpg);
}
The problem is that third column is being position relative to the right
side while the other two are relative to the left. What you end up with is
a
scenario at certain browser window sizes where the third column obscures
one
or both of columns 1 and 2.
Easy fix though, right? All you have to do is position col3 with the left
offset property.
(Was there a specific reason you set it up the way you have it?)
Matt
On 1/12/07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
My first CSS website. And my first post (hope it's not a duplicate),
although I've been trying to follow and learn from the discussions for
several weeks.
http://www.callibeth.com/index.htm
Although this page looks as I want it to in Firefox/PC and IE7/PC, I
understand that this page doesn't do well in Safari/MAC -- the first and
third letter boxes fall below the viewport, and middle box doesn't show
up
at all. Any clues as to how to fix it?
Any other advice appreciated. I'm afraid my CSS has midstream-project
spread. I'm not sure whether I should reference the CSS files. In case
yes:
http://www.callibeth.com/css/main.css
http://www.callibeth.com/css/index.css
Regards,
Beth Lee
Tallahasee, Florida
www.callibeth.com
callibeth.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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 check for newbite
The short answer is no, that's not possible. Granted, you could do some
complex math and set up max and min widths for the containing element, but
that's not universally supported and...well, it's just overly complicated.
If you want to use percentage margins to separate the columns, consider
floating them to position instead. This will require an extra container div
to hold the three columns, as your current markup would have them floating
up to the top of your header.
Floating isn't the only option: you could also wrap those columns in a div,
center the containing div, and use relative positioning to place the columns
within the containing div. It all depends on the final look you want.
(If you need more specific help on this, I'd be glad to consult off list.)
Matt
On 1/12/07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
Wow, what an easy fix. Thanks.
Another question: how to think about px versus percentage when setting up
the margins for these boxes on the galleries page? I'd like to use
percentages to accommodate different size viewports, but if my boxes are
px-sized, is that possible?
Before CSS, I used to think of myself as a very logical person ...
Beth
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Matt Dawson
Sent: Friday, January 12, 2007 5:07 PM
To: [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Page check for newbite
Yeah, it applies on that page too.
Fixed position can be a bit tricky for that very reason. Floats will push
each other out of the way and never overwrite each other, but the same
can't
be said for positioned elements. Any time you use positioning, you need to
test (or at least think through) as many conceivable scenarios as
possible.
Matt
On 1/12/07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
Thanks so much. (The specific reason I set it up the way I originally
had
it was ignorance :) although I don't have that excuse, really, after
going
through Eric Meyer's really excellent book *CSS Web Site Design*.)
I guess that same solution would apply to my wrong-headed layout here?:
http://www.callibeth.com/galleries.htm
Beth
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Matt Dawson
Sent: Friday, January 12, 2007 4:36 PM
To: [EMAIL PROTECTED]; css-d@lists.css-discuss.org
Subject: Re: [css-d] Page check for newbite
For starters, it's a very attractive first css layout. Congrats!
I noticed one thing right away- and I don't think it has anything to do
with
the Safari problem you mention.
Your layout scheme for the three columns (defined in index.css) is a
little
wonky. If I resize the size of my browser window, the left two
boxes/columns
(Calligraphy Book Arts and Art Prints for Sale) stay relatively still,
while the Weddings Celebrations box/column, moves wildly about. The
reason
for this can be found in this code:
#col1 {
width: 150px;
left: 330px;
background-image: url(../site_images/A.jpg);
}
#col2 {
width: 150px;
left: 555px;
background-image: url(../site_images/B.jpg);
}
#col3 {
width: 150px;
right: 330px;
background-image: url(../site_images/C.jpg);
}
The problem is that third column is being position relative to the right
side while the other two are relative to the left. What you end up with
is
a
scenario at certain browser window sizes where the third column obscures
one
or both of columns 1 and 2.
Easy fix though, right? All you have to do is position col3 with the
left
offset property.
(Was there a specific reason you set it up the way you have it?)
Matt
On 1/12/07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
My first CSS website. And my first post (hope it's not a duplicate),
although I've been trying to follow and learn from the discussions for
several weeks.
http://www.callibeth.com/index.htm
Although this page looks as I want it to in Firefox/PC and IE7/PC, I
understand that this page doesn't do well in Safari/MAC -- the first
and
third letter boxes fall below the viewport, and middle box doesn't
show
up
at all. Any clues as to how to fix it?
Any other advice appreciated. I'm afraid my CSS has midstream-project
spread. I'm not sure whether I should reference the CSS files. In case
yes:
http://www.callibeth.com/css/main.css
http://www.callibeth.com/css/index.css
Regards,
Beth Lee
Tallahasee, Florida
www.callibeth.com
callibeth.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org --
Re: [css-d] Centering images
Diane Ross wrote:
I don't know what I'm doing wrong. When I want to center an image I can only
get it to work if I select div align=center. If I use a class
.txtcenter, .center { text-align: center; }
Or #test img { text-align: center; } the image does not center.
Because an image is not text. To center an image, you need to set the
left and right margins to auto - #test img {margin: 0 auto 0 auto;}
Here is my example:
http://www.test.entourage.mvps.org/faq/center_images.html
Why are these simple things so hard for a newbie? sigh
I don't know, I'm still trying to figure this stuff out, too. I do
sometimes wonder why CSS doesn't have a simple align:center setting!
--
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Trying to find the best webdesign software
I'm not too picky -- I use whatever code editor happens to be available, which is currently Adobe GoLive, since it was packaged with Adobe CS2. The code view is nice, and the preview pane is pretty good and better than Dreamweaver's, I think. It's still important to test often in multiple browsers, of course. I've never tried to build a page in GoLive's WYSIWYG mode, so I can't really say how well that would work. I've been playing around with the trial version of Microsoft's Expression Web, and so far I'm impressed. Support for CSS seems to be very good, much better than any other WYSIWYG I've used. I think it's definitely worth serious consideration, especially for those who need a little extra help with their CSS coding. cheers, Marcello David Van O [EMAIL PROTECTED] wrote: Hey all. I currently use Dreamweaver to design my pages but it seems that support for css is minimal. Basic designs are fine, but once I have negative margines and wrappers etc with 2 and 3 columns the page does strange things. My designs look totally different than in the browsers and this makes it frustrating as I have to check the browser too often. I would like it if I could find something that works better. Is there such a package? I'm sure you all have more experience in a lot of different packages, just want to know what the best might be. Or do you use just text editors? Just trying to determine the best method so I can move on. Thanks for your input David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 IE7 information -- 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] Centering images
Diane Ross wrote: When I want to center an image I can only get it to work if I select div align=center http://www.test.entourage.mvps.org/faq/center_images.html Note that text-align: center should not be targeting the image. Instead: target the container - the div, p or other block-element - and text and images /inside/ the container will be centered. You can also center images directly with auto-margins. I've added a couple of examples to your test page here... http://www.gunlaug.no/tos/alien/test_07_1560.html ...so you can see how it works. Why are these simple things so hard for a newbie? sigh Probably so we who are slightly more experienced, can brag about it ;-) regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Trying to find the best webdesign software
The fundamental problem (for me) with editors that offer WYSIWYG views - visitors don't browse websites using web editors. They use browsers. And it is so easy to have a page open in multiple browsers, toggle between them, and reload the page. I don't care what a WYSIWY-really-aren't-going-to-get editor thinks a page looks like. Marcello Mastroianni wrote: I'm not too picky -- I use whatever code editor happens to be available, which is currently Adobe GoLive, since it was packaged with Adobe CS2. The code view is nice, and the preview pane is pretty good and better than Dreamweaver's, I think. It's still important to test often in multiple browsers, of course. I've never tried to build a page in GoLive's WYSIWYG mode, so I can't really say how well that would work. I've been playing around with the trial version of Microsoft's Expression Web, and so far I'm impressed. Support for CSS seems to be very good, much better than any other WYSIWYG I've used. I think it's definitely worth serious consideration, especially for those who need a little extra help with their CSS coding. cheers, Marcello David Van O [EMAIL PROTECTED] wrote: Hey all. I currently use Dreamweaver to design my pages but it seems that support for css is minimal. Basic designs are fine, but once I have negative margines and wrappers etc with 2 and 3 columns the page does strange things. My designs look totally different than in the browsers and this makes it frustrating as I have to check the browser too often. I would like it if I could find something that works better. Is there such a package? I'm sure you all have more experience in a lot of different packages, just want to know what the best might be. Or do you use just text editors? Just trying to determine the best method so I can move on. -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Trying to find the best webdesign software
My text editor is HomeSite and it uses Internet Explorer as it's internal browser. I use it to get a rough idea of where I'm at and periodically view in FireFox to make sure IE isn't screwing things up. If something gets screwy I open it in FF to see if it's REALLY behaving or not. Mike -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of david Sent: Friday, January 12, 2007 4:34 PM To: css-d Subject: Re: [css-d] Trying to find the best webdesign software The fundamental problem (for me) with editors that offer WYSIWYG views - visitors don't browse websites using web editors. They use browsers. And it is so easy to have a page open in multiple browsers, toggle between them, and reload the page. I don't care what a WYSIWY-really-aren't-going-to-get editor thinks a page looks like. Marcello Mastroianni wrote: __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Something is going horribly wrong here..
Hi, could you please check out http://other.cstrike-scene.de/example/template.html ? I have two questions, a) Why does this look like barely anything in IE and b) how come that FF and Opera mess up when I replace div .../div with div ... /? It's still valid XML, isn't it? Thanks! With kind regards Ben __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] columns not correct in 3 col and 2 col layout using IE 6
Hi, URL is: http://www.deadred.co.uk/Documents/index.php The problem that I am having is that both the 3 column layout on the home page and the 2 column layout on the other pages are not rendering correctly in IE 6. The second column is not lining up with the first column (i.e. 'News' should be level with 'The Picture House') in IE 6 and the third column is just a lot lower than it should be in IE 6. I have checked the code and CSS and both are OK except for 1 or 2 minor problems. The pages renders fine in FireFox. I have tried to fix this problem for a while but with no luck . Any help would be greatful. Thanks David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Trying to find the best webdesign software
Hi David I haven't found a single suite I like. I use a combination of HomeSite for html and TopStyle Pro for css, use Apache for local serving/browsing with a range of browsers on a couple of machines, lets me see how stuff like my php renders. Best Wayne __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Something is going horribly wrong here..
yaXay wrote: could you please check out http://other.cstrike-scene.de/example/template.html ? I have two questions, a) Why does this look like barely anything in IE and b) how come that FF and Opera mess up when I replace div .../div with div ... /? It's still valid XML, isn't it? Well, per the W3C Validator, your page is not valid XHMTL: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fother.cstrike-scene.de%2Fexample%2Ftemplate.html There's no such thing as an xhtml tag. I'm no expert, but IIRC, the tagname / structure is only for tags that normally have no closing tag - such as hr, link, etc. div DOES have a closing tag, because that's the only way a browser can tell what is inside the division. -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] columns not correct in 3 col and 2 col layout using IE 6
David Roberts wrote: URL is: http://www.deadred.co.uk/Documents/index.php The problem that I am having is that both the 3 column layout on the home page and the 2 column layout on the other pages are not rendering correctly in IE 6. The second column is not lining up with the first column (i.e. 'News' should be level with 'The Picture House') in IE 6 and the third column is just a lot lower than it should be in IE 6. Hmmm, the first piece of text in the left column is marked up as h1, the first text in the right column is an h2. Maybe that makes the difference? -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Centering images
On 1/12/07 3:23 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Note that text-align: center should not be targeting the image.
Instead: target the container - the div, p or other block-element - and
text and images /inside/ the container will be centered.
You can also center images directly with auto-margins.
I've added a couple of examples to your test page here...
http://www.gunlaug.no/tos/alien/test_07_1560.html
...so you can see how it works.
OK, now I have another question...
If I don't want all my images to be centered, should I use a class for
centering or a style like your example
#test2 img {
display: block; margin: 0 auto;
}
The majority of the images on the site will be centered while a few will be
wrapped in a paragraph.
I tried a class, but this did not work.
http://www.test.entourage.mvps.org/atest/image_center.html
.img_center {margin: 0 auto;
}
I hate to put a different topic in a thread, but in your example you used:
div {border-bottom: solid 1px #777;}
I'm having a big problem using hr / in the #main content area. After an
hr / the text gets thrown way down the screen. At first I thought it was
erasing the text which made no sense until I scrolled down to see it. I
really don't want to have to make divs every where I want to use a
separation line.
On this page, the hr / under the A, pushes text down where it does not
under B and C.
http://www.test.entourage.mvps.org/atest/
div id=abc
h2a id=A name=A/aA/h2
hr /
pa title=AOL Mail with Entourage
href=../accounts/aol.htmlAOL/a/p
My css:
hr {
clear: both;
color: #ccc;
height: 1px;
}
Why are these simple things so hard for a newbie? sigh
Probably so we who are slightly more experienced, can brag about it ;-)
It's humbling, I must say.
--
Diane
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Centering images
Diane Ross wrote:
OK, now I have another question...
The majority of the images on the site will be centered while a few
will be wrapped in a paragraph.
I tried a class, but this did not work.
http://www.test.entourage.mvps.org/atest/image_center.html
.img_center {margin: 0 auto; }
Should be...
.img_center {display: block; margin: 0 auto;}
...as in my previous example, since only block-elements can be centered
this way.
Images default to 'inline'. So, you can either center images as inline
elements by declaring 'text-align: center;' on their container, or turn
them into block-elements and center them - individually - with auto-margins.
I didn't find a class .img_center in your on-line stylesheet, so I can't
say why it didn't work. I added one with the styles from my example
above, and it worked perfectly.
I'm having a big problem using hr / in the #main content area.
After an hr / the text gets thrown way down the screen.
http://www.test.entourage.mvps.org/atest/
It's pushed down because you have declared 'clear: both' on the hr.
That's how 'clear' works in that kind of layout. It will clear
*everything* in sight - including the side-columns.
You should have a class for 'clear' so you can add it to the hr, or any
other element, when you need it - not add 'clear' permanently to the hr.
Now, for that particular page/layout you can keep that hr-styling, and
solve it by adding...
#main {overflow: hidden; margin: 0; }
* html #main {overflow: visible; height: 1%; }
* html #sidebar {overflow-x: hidden;}
...which will isolate all 'clear' inside #main (and correct the most
troublesome bugs in IE6). Works in all browsers I can lay my eyes on,
from IE6 and up.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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 check :: ~dL [continued]
~davidLaakso wrote: ~davidLaakso wrote: [trimmed] Whoops. I discovered a horrendous error and took it down. Back to the drawing board. ~dL Oh, my. Such a mess. Better now I hope. A page check of this test page with whatever you're running is appreciated. But when push comes to shove it's all versions of ie she hopes to please. The directory is here http://www.chelseacreekstudio.com/ca/auto/. Thank you for bearing with me. Best, ~dL : -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/
