Re: [css-d] Problems with unordered lists used for navigation menu in IE
Christine Ce wrote: Hello everyone! Hi :-) I am having a problem in IE with the navigation menu of a site I am working on. It's in the form of two nested unordered lists. The page is here: http://christinec.e-merging.net/katja/home.htm and the CSS is here: http://christinec.e-merging.net/katja/kr3collayout.css [snip code] It's looking fine in Firefox but in IE, there is what looks like a margin-bottom on the secondary links of the menu ( the ones in lower case). Add a width to #left-col ul.sec-nav li. (100% will do) Additionally something weird is happening right at the bottom, where the T of CONTACT is repeated underneath and extending right across with a partial border. I can't work out why it's there and how to get rid of it. Repeating text in IE usually is caused by lack of width on the containing element, sometimes in combination with comments in the source. You need 3px extra on the wrapper, or 3px less on on of the columns. (probably the 3px jog bug causing one of the columns to shift 3px to the right) -- 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] strange border rendering on a fieldset in ie
Hi Rob If anyone has seen this problem before and knows how to sort it or knows a link please let me know. Yup, I've seen it before: in every single form I've ever made - and no, there's no way to fix it. This is just how IE renders the legend position :-( In this particular case, I would use a conditional style sheet ( http://www.quirksmode.org/css/condcom.html ) to give IE a stylesheet to make it look presentable (change the background on the fieldset to that of the form for instance). They won't both look the same, but they both will look ok :-) Robert O'Rourke wrote: Hello, I've been spending some time getting to grips with forms and css, There's a strange effect in IE where the fieldset displays properly as indicated by the background-color however the orange border and legend are pushed down into the fieldset, there's a test page here: http://www.sanchothefat.com/css/multiform.html The css is inline and really scruffy, apologies for that if you're used to looking at nice css. If anyone has seen this problem before and knows how to sort it or knows a link please let me know. Cheers Rob __ 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/ -- Futurate's site for the Their Reading Futures project has been nominated for a prestigious Jodi Mattes accessibility award. This is our second award nomination this year. See: http://www.futurate.com/?p=132 -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.385 / Virus Database: 268.4.1/309 - Release Date: 11/04/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/
[css-d] Aligning Form Elements w/ Text (checkboxes, radio buttons, etc)
Pleaes look at this page - http://www.santarosatrans.com/forum/index.php?action=search See how the check boxes and the input fields when placed next to text. There must be a way to get the text aligned properly as this looks terrible. Thanks for any help. Tom __ 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 incorrectly positions static content following floats with clears
Zoe M. Gillenwater wrote: Thanks Bruno. I can confirm that this works in my test page, and the paragraph text still wraps. However, I think in my current site I am going to compromise with Georg's solution. This is because the site is going to be heavily maintained by non-web people, and there is therefore a risk that the clearers could get deleted out the html or not added in new pages to begin with. Nevertheless, it's great to have this fix available to me. [...] Hi Zoe, I don't know if I can understand all the descriptions of the complicated IE-problems, maybe it is noticed and solved already. Anyway, I saw at certain window-width's (and then area's of about 3px I guess) in IE the right column is completely dropping under the left column (moving slowly the sidebar width): the Sidewalks are Downwalks then. ;-)It occurs in different resolutions. Screenshot IE http://home.tiscali.nl/developerscorner/css-discuss/images/sr2s-IE-drop.gif. Screenshot FF http://home.tiscali.nl/developerscorner/css-discuss/images/sr2s-FF-ok.gif. Hope this is the normal dropping bug, which can be solved by adapting the width of the right container. Greetings, francky __ 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] Volume Display using CSS
Ingo Chao wrote: Zoe M. Gillenwater wrote: In the context of web development, semantic markup means using the most meaningful (X)HTML element to mark up a piece of content as possible, given the constraints of the (X)HTML vocabulary, where the meaning of the element matches the meaning of the content. So yes, there are no specific (X)HTML elements for volume, tone of voice, etc, but the idea is to use the elements that come closest to matching these pieces of content as possible. However, semantic markup, by itself, is off-topic for this list. If one was to ask What would be a good way to mark this up and style it so that it would look like such and such? Keep in mind that I care about semantic markup. that might be ok. Straight markup questions are not. Wait, Scott originally asked I need to display a volume bar and indicate the current level on a page. I was hoping to implement this using CSS alone, and was wondering if anyone had done something similar, and had some ideas. and correct me if there are more ways to interpret Scott's question; I read it as a CSS question. And my attempt which was snipped for no obvious reason was a CSS answer. It was absolutely a CSS question. I never said it wasn't, never said your answer was inappropriate, never said the thread was over. I mean what I say -- if I wanted to say these things, I would have said them. :-) After my little explanation of semantic markup, however, I wanted to just drop a reminder that semantic markup (or valid markup, or markup whatever) is not on-topic for this list except when discussed in conjunction with CSS. By all means, continue discussing how to mark up and style a volume control. What would be your answer, to help Scott? I have no answer, nor am I at all interested in such an answer. So I didn't provide one. Sorry Scott, I can't help on this thread. For the markup, I decided to go for a definition list, and my question What would be the semantically correct representation of a volume control, a definition list? could be read as a moment of uncertainty. Others who show some uncertainty about their results do get answers and comments on this list regularly, sometimes by me. Again, I wasn't saying your question was inappropriate. I didn't respond to your question simply because I have no interest in that question nor ideas readily at hand. 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] Help, please. IE bug?
Hi, everybody. I'm having some trouble with a design I'm doing...looks good in Firefox and Safari, but it's not working properly in IE 6 (haven't tested it on other IE versions yet). I added a subnav system, and you can see in IE when hovering on a primary menu option that contains a subnav, the list item below it goes wonky. I think I've just been staring at it too long this morning, but I can't pinpoint the problem. The page is at http://www.sunscapeproperties.net/index2.html The css is at http://www.sunscapeproperties.net/style2.css Anybody? Thank you so much. ~john __ 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] Help, please. IE bug?
john wrote: Hi, everybody. I'm having some trouble with a design I'm doing...looks good in Firefox and Safari, but it's not working properly in IE 6 (haven't tested it on other IE versions yet). I added a subnav system, and you can see in IE when hovering on a primary menu option that contains a subnav, the list item below it goes wonky. I think I've just been staring at it too long this morning, but I can't pinpoint the problem. The page is at http://www.sunscapeproperties.net/index2.html The css is at http://www.sunscapeproperties.net/style2.css Anybody? Thank you so much. ~john Maybe giving the ul#navlist li and/or ul#navlist li a the same width (140px) as the ul#navlist ul? (for me it worked sometimes; no time to test this one) Greetings, francky __ 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 incorrectly positions static content following floats with clears
Zoe M. Gillenwater wrote: http://www.saferoutesinfo.org/guide/float-clear-IE-gaps.png The paragraph following the h1 is indented from the left by about 20px, and there is a gap of about 60px below each h2. Don't know what other bugs your IE is throwing in there. My version renders it like this... http://www.gunlaug.no/tos/alien/onlineguide-ie6.png ...where the gap below the headlines are present, but no left-gaps. The gap below headlines can be corrected, but if your IE-version isn't playing along with the rest then there's not much I can do about it. - What will work better? What's the problem you are trying to solve? http://www.gunlaug.no/tos/alien/onlineguide-o9tp2.png ...does turn out as... http://www.gunlaug.no/tos/alien/onlineguide-ff1501.png ...with the changes I suggested. It has to do with _where_ margins goes on CSS-tables, and there are some differences between those standards that are at best a bit unclear. (btw: Large font-size on those images is the effect of 'min font size = 14px' applied to a page - any page - with 'font-size: 62.5%' set on body. No big deal, but I mention it in case you wonder about it.) What is this supposed to do? All it seems to do is add extra padding to the content column in FF, which is not desired, and leaves IE the same. Values can be corrected to suit your taste. You can also just leave out the suggested changes, and wait for those browsers to (hopefully) settle on the same interpretation of the same standards. 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] Help, please. IE bug?
Thanks, Francky. I tried your suggestion, and toyed more with the widths, but nothing I did seemed to fix it. I would appreciate any other help that can be offered. Thank you! ~john On 4/12/06, francky [EMAIL PROTECTED] wrote: john wrote: Hi, everybody. I'm having some trouble with a design I'm doing...looks good in Firefox and Safari, but it's not working properly in IE 6 (haven't tested it on other IE versions yet). I added a subnav system, and you can see in IE when hovering on a primary menu option that contains a subnav, the list item below it goes wonky. I think I've just been staring at it too long this morning, but I can't pinpoint the problem. The page is at http://www.sunscapeproperties.net/index2.html The css is at http://www.sunscapeproperties.net/style2.css Anybody? Thank you so much. ~john Maybe giving the ul#navlist li and/or ul#navlist li a the same width (140px) as the ul#navlist ul? (for me it worked sometimes; no time to test this one) Greetings, francky -- This message was typed on a 100% recycled keyboard. __ 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 incorrectly positions static content following floats with clears
On Apr 12, 2006, at 9:21 PM, Gunlaug Sørtun wrote: http://www.gunlaug.no/tos/alien/onlineguide-o9tp2.png ...does turn out as... http://www.gunlaug.no/tos/alien/onlineguide-ff1501.png ...with the changes I suggested. It has to do with _where_ margins goes on CSS-tables, and there are some differences between those standards that are at best a bit unclear. Section 9.5 is otherwise pretty clear for this particular case cite The margin box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself. /cite http://www.w3.org/TR/CSS21/visuren.html#floats Firefox (and iCab) is correct in this case, Opera, Safari and Konqueror are wrong to slide the margin under the floated box. Philippe --- Philippe Wittenbergh http://emps.l-c-n.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] Aligning Form Elements w/ Text (checkboxes, radio buttons, etc)
On 4/12/06, TMH Design [EMAIL PROTECTED] wrote:
Pleaes look at this page -
http://www.santarosatrans.com/forum/index.php?action=search
See how the check boxes and the input fields when placed next to text.
There
must be a way to get the text aligned properly as this looks terrible.
Thanks for any help.
Tom,
It's the rule you have for input in links.css.
input {
border:1px solid #3D5E7D;width:300px;margin:3px 0px 9px
0;background-color:transparent;font-weight:bold;color:#3D5E7D;
}
the 9px for the bottom margin on the input is pushing down the text. Take
that out, and the text aligns with the checkbox.
Jeff
__
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] Windows XP Made of CSS in Opera
Hey all I often set myself little challenges to do, to teach myself some more about CSS, and its just fun. Anyway my latest one was to try and make Windows XP made using only CSS and XHTML, I used the CSS pop up code from: http://www.moronicbajebus.com/wordpress/wp-content/cssplay/pop-up-menus/ as the base for this, and have got a little demo ive been working on. The trouble is the demo only works in Firefox (ive not got a mac here at the present so ive only tested it on Firefox on a PC). I was wondering if anyone knew how I could make this work in Opera. It works fine for the most part, but when I try opening the final list, or the third layer as its labelled on the demo, it only displays one of the list items. I understand theres a lot of CSS used, and was wondering if this problem could be solved or would it involved a mass overhaul of the entire CSS and all to solve? The demo is found here: http://www.magic-sandwich.co.uk/windowshome.html/ Thanks Kev Stone Magic Sandwich http://www.magic-sandwich.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] Windows XP Made of CSS in Opera
[snip] http://www.magic-sandwich.co.uk/windowshome.html/ [/snip] Gives a 404 error. __ 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] Windows XP Made of CSS in Opera
Kevin Stone wrote: Hey all snip The demo is found here: http://www.magic-sandwich.co.uk/windowshome.html/ Demo can be found here: http://www.magic-sandwich.co.uk/other/windows/windows.html I get a 404 when visiting the original link. -- Thanks, George __ 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] Windows XP Made of CSS in Opera
Jay Blanchard wrote: [snip] http://www.magic-sandwich.co.uk/windowshome.html/ [/snip] Gives a 404 error. Just remove the trailing slash, and everything is hunky-dory. It's a really cool demo! The irony that Windows does not work on IE; an infinite loop of non-working-ness! Beautiful! ;-). Updated link: http://www.magic-sandwich.co.uk/windowshome.html Cheers, Rahul. __ 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 incorrectly positions static content following floats with clears
Zoe M. Gillenwater wrote: http://www.saferoutesinfo.org/guide/float-clear-IE-gaps.png The paragraph following the h1 is indented from the left by about 20px, and there is a gap of about 60px below each h2. I see the left gap. Without checking too much, I think that its reason is the following: - The fix makes the paragraphs inline (or better sort of inline-blocks) - As such they suffers of the indented text bug [1]. Adding display:inline to the right floats should fix this. I guess that the reason why Georg doesn't see the problem is that he applied the fix to the h1 too. When also the h1 is inline, the bug doesn't trigger. About the space below each h2, I haven't checked, but can't this be explained by the sum of h2's padding-bottom, h2's margin-bottom, p's padding top, ...? (without the fix there are only collapsing margins) Bruno [1] http://www.positioniseverything.net/explorer/floatIndent.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] strange border rendering on a fieldset in ie
Alright Richard,
Cheers for getting back to me, I've actually found a rudimentary fix
for the border problem. I doubt it will hold up when re-sizing text in
IE but to be honest for the rare occasions thats necessary it still
won't look too bad because everything is in the right order.
I had 10px of padding on the fieldset, this has the effect of
pushing the legend down within the fieldset, even though the fieldset's
/border/ is kept in line with the legend.
I first of all removed the padding ( using * html ), this made the
legend sit at the top of the fieldset but still contained within it.
When i first saw fieldset/legend rendering i thought it was an
automatic position: relative type effect, so in this instance that is
exactly how to fix this issue in IE,
* html fieldset {padding-top: 0;} /* remove 10px padding */
* html legend {position: relative; top: -10px;} /* move legend and
border to correct position */
I'm going to put a test together to find out if putting margin on
the fieldset and margin on its children instead of padding on the form
and padding on the fieldset alter the way its rendered in IE.
Hope this helps anyone with the same problem,
Rob
[EMAIL PROTECTED]
Richard Allsebrook wrote:
Hi Rob
If anyone has seen this problem before and
knows how to sort it or knows a link please let me know.
Yup, I've seen it before: in every single form I've ever made - and no,
there's no way to fix it. This is just how IE renders the legend
position :-(
In this particular case, I would use a conditional style sheet (
http://www.quirksmode.org/css/condcom.html ) to give IE a stylesheet to
make it look presentable (change the background on the fieldset to that
of the form for instance).
They won't both look the same, but they both will look ok :-)
__
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] changing bullet point colours
Hi Has anyone found a way of changing bullet point colours to a different colour to the text? Cheers Dave __ 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] table layout to css conversion
I am converting this site http://www.rackemann.com/ from tables to css; and, I'm a little reluctant to go further without some feedback. Your comments on any aspect will be appreciated. There is only one clickable link: Read on... (bottom of left column) The uri is: http://www.dlaakso.com/srb/ Thanks. ~davidLaakso __ 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 incorrectly positions static content following floats with clears
Philippe Wittenbergh wrote: Section 9.5 is otherwise pretty clear for this particular case http://www.w3.org/TR/CSS21/visuren.html#floats So, how do we best solve it now..? - 1) just wait until all browsers settle on the same interpretation. - 2) do as I usually do: not apply margins or paddings to css-table, and adjust whatever needs adjusting on the table's content-elements instead. - 3) forget it ever happens. - 4) other options..? 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] changing bullet point colours
Try background images: http://css.maxdesign.com.au/listamatic/vertical05.htm -C On Apr 12, 2006, at 10:57 AM, David Hearn wrote: Hi Has anyone found a way of changing bullet point colours to a different colour to the text? Cheers Dave __ 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/
Re: [css-d] changing bullet point colours
Has anyone found a way of changing bullet
point colours to a different colour to the text?
Dave, try this:
CSS
li { color: #C00; }
li span { color: #0C0; }
HTML
ul
lispanList Item One/span/li
/ul
Regards,
Nigel
__
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/
Re: [css-d] IE incorrectly positions static content following floats with clears
Bruno Fassino wrote:
I guess that the reason why Georg doesn't see the problem is that he
applied the fix to the h1 too. When also the h1 is inline, the bug
doesn't trigger.
You got that right :-)
...one dead bug - one to go...
About the space below each h2, I haven't checked, but can't this be
explained by the sum of h2's padding-bottom, h2's margin-bottom, p's
padding top, ...? (without the fix there are only collapsing margins)
Just checked (roughly) and those headline-margins do indeed mess it up a
bit even as inline-elements.
Setting border on all elements show that headlines are in need of zero
paddings/margins, while paragraphs will do fine with something close to
'padding: 1.2em 0;' that I'd given them. So, a bit back and forth will
make things line up a bit better.
improved workaround...
* html #content p, * html #content h1, * html #content h2 {
display: inline;
zoom: 1;
padding: 1.2em 0;
margin: 0;
}
* html #content h1, * html #content h2 {padding: 0;}
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] Windows XP Made of CSS in Opera
Kevin Stone wrote:
... It works fine for the most part, but when I try opening the final
list, or the third layer as its labelled on the demo, it only
displays one of the list items.
http://www.magic-sandwich.co.uk/windowshome.html
Have seen this Opera-nonsense before, but have forgotten how I fixed it.
Have to look a bit further into the Opera bug-house, but when I add this...
#popupmenu ul li ul li ul li:hover ul,
#popupmenu ul li ul li ul li ul li:hover ul{
display: table;
}
...also the third level comes out fine in Opera 8.5.
Opera 9tp2 is only partly with me on this, and need some hovering around
on 3. level before rendering it complete.
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] changing bullet point colours
: Hi Has anyone found a way of changing bullet point colours to a different colour to the text Hello, You could always put the text in a span, i'm not sure if you can do it without markup. Its got me thinking though, what about multi-coloured bullet points, each list item would require a class but thats quite common for navigation bars using icons etc... Here's something i knocked up: http://www.sanchothefat.com/css/mentalist.html Rob [EMAIL PROTECTED] __ 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] changing bullet point colours
Its had a baby! I did knock it up after all... =P Akins, Chris wrote: Maybe you mean mocked up rather than knocked up. 2 different things entirely. :-) Here's something i knocked up: http://www.sanchothefat.com/css/mentalist.html Rob [EMAIL PROTECTED] __ 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] question about safari, IE and FF
I gotta ask this question.. ive done a few sites recently which look exactly as they should in IE, FF and event Netscape for mac.. but for what ever reason, the styles are not even loading in safari. What is up with that? Inquiring minds would like to know what piece of code am I missing? Thanks! Paul __ 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] question about safari, IE and FF
Paul Seale wrote: I gotta ask this question.. ive done a few sites recently which look exactly as they should in IE, FF and event Netscape for mac.. but for what ever reason, the styles are not even loading in safari. What is up with that? Inquiring minds would like to know what piece of code am I missing? Analytical minds would like to see the patient ;-) -- 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] question about safari, IE and FF
Paul, On Apr 12, 2006, at 1:25 PM, Paul Seale wrote: I gotta ask this question.. ive done a few sites recently which look exactly as they should in IE, FF and event Netscape for mac.. but for what ever reason, the styles are not even loading in safari. What is up with that? Inquiring minds would like to know what piece of code am I missing? Safari's css parser is particularly sensitive to errors. If your css validates, then check for control characters. If you gave us a url, we could tell you exactly what the problem is instead of guessing. Roger, -- Roger Roelofs [EMAIL PROTECTED] __ 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] table layout to css conversion
On 4/12/06, ~davidLaakso [EMAIL PROTECTED] wrote: I am converting this site http://www.rackemann.com/ from tables to css; and, I'm a little reluctant to go further without some feedback. Your comments on any aspect will be appreciated. There is only one clickable link: Read on... (bottom of left column) The uri is: http://www.dlaakso.com/srb/ these are just my personal opinions, no direct criticism meant. :) though the original font size is too small, i really like the look of the original site. it looks upbeat, positive, and it almost all fits on my standard 800x600 screen size. i personally don't view sites in a resolution any bigger. the colors of the original site aren't exactly what i think of as lawyer colors, but the fit together well enough for the most part. the original site looks clean but full. i can get to what i'm looking for (if i could read the menu words) easily. the menus are in logical places to me. in short, i really like it, though the colors could be blended better i think. your site's text is easier to read, but that's really the only thing i like more compared to the original. the color pink is completely not preparing me to see a lawyer site, and i know this is stereotypical (though i'm a girl, so perhaps that excuses me?) but i don't want a girly lawyer. all i see when i view the remake is this *huge* header that takes up literally half of my screen. The other half is taken up by sub headers. where's the information? there are four pages of scrolling to do. the fourth page is all about a tall picture and a worthless (i know you need it, but to me as a viewer it's worthless) disclaimer. the disclaimer alone takes up half of a screen. i wasn't prepared to see a menu on the third page. i didn't even know it was there until i was counting how many pages it was so i could give an accurate count and happened to see it. to me it looks like a quote, not links. the intent combined with the non-standard coloring didn't register for me. on the practice areas part, the links that take up two lines are indistinguishable from the single-line links. in order to tell them apart i had to slowly hover over each one. the linked company name at the top should include the if it's a link. the company name has that in it, and imo so should the link. i hope those were constructive. :) good luck! __ 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 please
Hi again everyone, Requesting a site check (excluding menu - which is linked to the old, table-based site and should be ignored) for the following site: Site: http://www.baycreek.net/newest.html CSS: http://www.baycreek.net/newest.css Having a few display problems in Safari, so any help on that front is greatly appreciated and as always, thanks for any and all comments. __ 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] question about safari, IE and FF
Here is an example. The CSS validates. Help would be great. http://www.wrightforauditor.com/aboutmark.asp Thanks. -Original Message- From: Roger Roelofs [mailto:[EMAIL PROTECTED] Sent: Wednesday, April 12, 2006 12:48 PM To: [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] question about safari, IE and FF Paul, On Apr 12, 2006, at 1:25 PM, Paul Seale wrote: I gotta ask this question.. ive done a few sites recently which look exactly as they should in IE, FF and event Netscape for mac.. but for what ever reason, the styles are not even loading in safari. What is up with that? Inquiring minds would like to know what piece of code am I missing? Safari's css parser is particularly sensitive to errors. If your css validates, then check for control characters. If you gave us a url, we could tell you exactly what the problem is instead of guessing. Roger, -- Roger Roelofs [EMAIL PROTECTED] __ 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] Problems with unordered lists used for navigation menu in IE
Thank you Els, it's all fixed now! :-) Christine On 4/12/06, Els [EMAIL PROTECTED] wrote: Christine Ce wrote: Hello everyone! Hi :-) I am having a problem in IE with the navigation menu of a site I am working on. It's in the form of two nested unordered lists. The page is here: http://christinec.e-merging.net/katja/home.htm and the CSS is here: http://christinec.e-merging.net/katja/kr3collayout.css [snip code] It's looking fine in Firefox but in IE, there is what looks like a margin-bottom on the secondary links of the menu ( the ones in lower case). Add a width to #left-col ul.sec-nav li. (100% will do) Additionally something weird is happening right at the bottom, where the T of CONTACT is repeated underneath and extending right across with a partial border. I can't work out why it's there and how to get rid of it. Repeating text in IE usually is caused by lack of width on the containing element, sometimes in combination with comments in the source. You need 3px extra on the wrapper, or 3px less on on of the columns. (probably the 3px jog bug causing one of the columns to shift 3px to the right) -- 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] question about safari, IE and FF
On 12 Apr 2006, at 19:31, Paul Seale wrote: Here is an example. The CSS validates. Help would be great. http://www.wrightforauditor.com/aboutmark.asp Thanks. Have you fixed this? It looks fine one my Mac with Safari 2.0.3 (417.9.2). Regards, 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] table layout to css conversion
cj wrote: On 4/12/06, ~davidLaakso [EMAIL PROTECTED] wrote: I am converting this site http://www.rackemann.com/ from tables to css; and, I'm a little reluctant to go further without some feedback. The uri is: http://www.dlaakso.com/srb/ [...] i hope those were constructive. :) good luck! Thank you for taking the time to look and the lengthy reply. Warm wishes, Leo 'theLion' __ 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] table layout to css conversion
I am converting this site http://www.rackemann.com/ from tables to css; and, I'm a little reluctant to go further without some feedback. The uri is: http://www.dlaakso.com/srb/ I think the site needs a color more reflective of a law firm. Grays or Browns usually work well. Additionally, red is a power color and can be integrated nicely as well. I think the three navigation menus are confusing (top horizontal, and the right two columns). As a site visitor, I'm not sure where to go. It's not that intuitive, I think. Personally, I think the old site is.. well, ugly. However, it is quite navigable (even though the navigation links are all images.. yuck). I think with a better color and navigation scheme, your new site will be leaps ahead of the old one. Good work, and best of luck. Connor Boyack WebVid Productions http://www.webvidpro.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] site check please
Ryan Brunsvold wrote: Hi again everyone, Requesting a site check (excluding menu - which is linked to the old, table-based site and should be ignored) for the following site: Site: http://www.baycreek.net/newest.html CSS: http://www.baycreek.net/newest.css I think you'll need a background-color for your background-image-- those users, at higher resolutions, who require a healthy font-zoom are going to see something other than what I think you may prefer. Best, ~davidLaakso __ 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] Hello new to list and with layout problem
Hi everyone, I¹m Richard I¹m new to the list and new to CSS. I¹m learning it for my job and the websites I work on. I¹m used to tables and old fashioned html and am having a hard time understanding how layout is done in css. I¹m used to working with Fireworks and Photoshop, Illustrator and InDesign/Quark where I can just drag items around visually and plunk them wherever so css seems very alien and non intuitive to me. I¹ve got an example here of what I¹ve done and now I¹m stuck. And I¹ve included a jpg of what I would like it to look like. Can it be done in css? Frankly I¹m having a hard time believing the hype about how good and useful css is supposed to be when I can¹t even do the simplest layout. I feel stupid. Can what I want be done and how would I go about it? I design on a Mac with Dreamweaver MX 2004 (and Firefox) but nearly everyone else I work with uses XP and the site will mostly be viewed on Win IE and maybe Win Firefox. Any help would be greatly greatly appreciated. Thank you Richard http://www.edu.uwo.ca/newsletter/css_test_files/test.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] Hello new to list and with layout problem
I¹ve got an example here of what I¹ve done and now I¹m stuck. And I¹ve included a jpg of what I would like it to look like. Can it be done in css? Frankly I¹m having a hard time believing the hype about how good and useful css is supposed to be when I can¹t even do the simplest layout. I feel stupid. Can what I want be done and how would I go about it? Richard, You might try something like this. div style=clear:both; margin:5px 0;img src=image.jpg style=float:left; padding-right:10px; /Outlook Tutorial/div div style=clear:both; margin:5px 0;img src=image.jpg style=float:left; padding-right:10px; /Outlook Tutorial/div That should get you started. If you want the text to be a little lowered (and centered vertically next to the image) you might want to wrap it in its own div, giving it a margin-top of 5px or whatever looks best. Hope that helps. Connor Boyack WebVid Productions http://www.webvidpro.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] table layout to css conversion
David Laakso wrote... I am converting this site http://www.rackemann.com/ from tables to css; and, I'm a little reluctant to go further without some feedback. Your comments on any aspect will be appreciated. There is only one clickable link: Read on... (bottom of left column) The uri is: http://www.dlaakso.com/srb/ Thanks. ~davidLaakso 04/12/2006 David: The fonts are great, maybe a little more spacing between letters in some sections. The color is fine; maybe a little dirtier, but not darker. I don't see pink; I see red-leaning beige. CJ is right, to me, regarding vertical space. Too much vertical scrolling. Seems you could get this part of the site onto one 1024 x 768 page. WINXPsp2 at 1024x768: 1. FF 1.5.0.1 zoom +2x looks good, columns don't break; zoom -2x small text gets somewhat fuzzy; styles off looks good. 2. Opera 8.5.1 no zoom, text looks somewhat squished vertically; zoom both ways makes column border images go wonky, but columns remain intact, +2x makes site unviewable, as whole kit-and-kaboodle is made larger, not just text; -2x text is unreadable to me; styles off looks good. By the way, the site looks swank on small screen; write a version for accident-prone cell phone users?!? 3. IE 7.0beta2 text size largest looks good; text size smallest gets somewhat fuzzy. My design-crippled mind says, Move the lion image top left. Then the Rackmann, Sawyer Brewster box against it, lining the R, S, and B vertically, fancify them and get rid of the RSB initials. counsellors at law and nav list directly under names, still right of image. Is counsellors mis-spelled? Columns as is, but li in left column needs more right margin. Address and disclaimer centered as is, but disclaimer and links to... need more width (65%?) To me, RSB's inclusion of the Rackmann Strategic Consulting reference immediately begs the question what is it?, yet seems too cryptic to warrant clicking on to discover the answer. Maybe a short description of the service is in order. But what do I know? Best Regards, Peter www.fatpawdesign.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] Hello new to list and with layout problem
Hi Richard, I'm definitely not an expert but there are definite advantages to css in terms of the layout, once you've done some research and a lot of playing around with css layouts it all comes together. Getting used to using class names and ids appropriately is the key to not repeating css code. Ids can be used only once and class names are good for multiple uses. If you have a look at this: http://www.sanchothefat.com/css/css-d.html, it's done using one id and one class name. Feel free to use it, the css is in the header. Rob Richard Gilmore wrote: Hi everyone, I¹m Richard I¹m new to the list and new to CSS. I¹m learning it for my job and the websites I work on. I¹m used to tables and old fashioned html and am having a hard time understanding how layout is done in css. I¹m used to working with Fireworks and Photoshop, Illustrator and InDesign/Quark where I can just drag items around visually and plunk them wherever so css seems very alien and non intuitive to me. I¹ve got an example here of what I¹ve done and now I¹m stuck. And I¹ve included a jpg of what I would like it to look like. Can it be done in css? Frankly I¹m having a hard time believing the hype about how good and useful css is supposed to be when I can¹t even do the simplest layout. I feel stupid. Can what I want be done and how would I go about it? I design on a Mac with Dreamweaver MX 2004 (and Firefox) but nearly everyone else I work with uses XP and the site will mostly be viewed on Win IE and maybe Win Firefox. Any help would be greatly greatly appreciated. Thank you Richard http://www.edu.uwo.ca/newsletter/css_test_files/test.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/ __ 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] table layout to css conversion
I like the idea of you using live text for some of the header text, but when it comes down to it--when it is on the screen, it just doesn't look optimum/professional due to aliasing. Try experimenting with different font-family, font-size, or even color. (The Georgia is easier to read than Palatino, but that's mainly because it is not as large.) And all the italics is a bit too much, again because of aliasing. Use italics sparingly or render it as an anti-aliased graphic. This is a frustration I have on my sites and am not sure of a best way to optimize text so that it doesn't get all jagged (even with common fonts like Arial), other than rendering it an anti-aliased graphic. Perhaps it is one of the cons of using percent-based font-size? Oh if only CSS/browsers could anti-alias... Good luck. -p PS I concur that pink as a bg-color is perhaps not ideal for a law firm. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of ~davidLaakso Sent: Wednesday, April 12, 2006 8:07 AM To: CSS Discussion Subject: [css-d] table layout to css conversion I am converting this site http://www.rackemann.com/ from tables to css; and, I'm a little reluctant to go further without some feedback. Your comments on any aspect will be appreciated. There is only one clickable link: Read on... (bottom of left column) The uri is: http://www.dlaakso.com/srb/ __ 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] Hello new to list and with layout problem
Hi Richard The short answer is 'yes' that can be done. I notice some people have already offered suggestions. Here are some references that I hope will help you. Whilst there are some rules there are many ways to implement those rules. You're now entering a world of standards-based design. You'll come across terms like semantic coding and structured layout. So, forget about most of the WYSIWYG html editing functions and get used to coding in source view. I'd highly recommend a book called Designing with Web Standards by Jeffery Zeldman: http://www.zeldman.com/dwws/ I'm on my second reading now and will no doubt read it again. In addition, check out Eric Meyer on CSS: http://www.ericmeyeroncss.com/ and More Eric Meyer on CSS by Eric Meyer. http://more.ericmeyeroncss.com/ This is also an excellent site: http://www.positioniseverything.net/ There are tutorials and explanations that are invaluable. There are also many resources on many sites and most of those can be found linked from Jeffrey Zeldman's site listed above. Finally, you can make a transition to CSS based layouts by coding your pages as XHTML Transitional. Whilst tables *should* be used to present tabular data, it's still okay to use them for some layout purposes - just remember to use CSS to do all the presentation or formatting. It may be tempting to use DreamWeaver to code the formatting (fonts, position, size, colour, etc) but don't go down that path use the stylesheet. Once you get your head around DIVs, selectors, classes and the whole notion of separating presentation from content, you won't regret it. Your work will be more easily produced, maintained and more accessible. The most difficult thing for me has been browser compatibility. Some things look perfect in Safari and FireFox but look totally wrong in IE / Win. I'm still very new to CSS but happy to help. Feel free to email me off this list if you need... although you probably won't need to because there are people here much more qualified than me ... Cheers Jonno On 13/04/2006, at 8:06 AM, Richard Gilmore wrote: Hi everyone, I’m Richard I’m new to the list and new to CSS. I’m learning it for my job and the websites I work on. I’m used to tables and old fashioned html and am having a hard time understanding how layout is done in css. I’m used to working with Fireworks and Photoshop, Illustrator and InDesign/ Quark where I can just drag items around visually and plunk them wherever so css seems very alien and non intuitive to me. I’ve got an example here of what I’ve done and now I’m stuck. And I’ve included a jpg of what I would like it to look like. Can it be done in css? Frankly I’m having a hard time believing the hype about how good and useful css is supposed to be when I can’t even do the simplest layout. I feel stupid. Can what I want be done and how would I go about it? I design on a Mac with Dreamweaver MX 2004 (and Firefox) but nearly everyone else I work with uses XP and the site will mostly be viewed on Win IE and maybe Win Firefox. Any help would be greatly greatly appreciated. Thank you Richard http://www.edu.uwo.ca/newsletter/css_test_files/test.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/ __ 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] layout - not centered, not left aligned
On 4/12/06, Donna Casey [EMAIL PROTECTED] wrote:
Trey wrote:
say you have a page/design that's 900px wide, but you want anyone
with a view portal of say 800px to see the _rightmost_ 800px. so the
design is neither centered nor left aligned.
What's wrong with placing everything in a wrapper div that is absolutely
positioned right?
#wrapper {
position:absolute;
width:900px;
right:0;
top:0;
z-index:1;
border:1px solid #000;
min-height:400px;
}
when that loads, the right edge displays
Or maybe I'm missing what you are asking?
But when the viewport is 800px, that will probably still show the
leftmost 800px of it. basically that code will attach the page to the
right of large viewports.
I don't think its doable without JS.
--
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
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] Width of nested block elements
(edited address)
www.loc.gov/nls/children/
Is there a workaround that enables me to keep the banner inbounds in
FF and at the end of the file?
Try adding...
#wrapper {position: relative; padding-top: 1px;}
...so the absolute positioned 'banner' has an element to relate to.
That'll make its position and width adjust automatically.
Otherwise it will relate to body and adjust position and width
accordingly in all standard-compliant browsers that I know of. IE isn't
amongst those...
The extra 'padding-top: 1px' I put in, is there to make wrapper contain
all those collapsing margins.
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] absolute positioning items in self-contained blocks?
Hi,
I am trying to turn a definition list into an attractive tabbed pane.
The user clicks on one of the definition titles and the associated
definition is set to display:block by JavaScript. The CSS part is
causing me some grief.
In the example below, I would like the grey dl to contain all of the
green dd. If this is the case, then there would be grey in the
bottom left side of the output (below the blue). I have used absolute
positioning and don't know if it is possible to do what I want. I hope
there is a simple way without altering any of my markup. Any
suggestions greatly appreciated.
Thanks,
Peter
head
titletabbed pane/title
style type=text/css
.tabbedPane {background:grey; position:relative;}
.panel {margin:0; left:10em; background:lightgreen; position: absolute;}
.tab {width:10em; cursor: pointer; background: lightblue;
float:left; clear:left;}
/style
/head
body
dl class=tabbedPane
dt class=tabOne/dt
dd class=panelUsually people put some Greek in places like
this.br /Usually people put some Greek in places like this.br
/Usually people put some Greek in places like this.br /Usually
people put some Greek in places like this.br /Usually people put
some Greek in places like this.br /Usually people put some Greek in
places like this.br /Usually people put some Greek in places like
this.br /Usually people put some Greek in places like this.br
/Usually people put some Greek in places like this.br /Usually
people put some Greek in places like this.br /Usually people put
some Greek in places like this.br /Usually people put some Greek in
places like this.br /Usually people put some Greek in places like
this.br /Usually people put some Greek in places like this.br
//dd
dt class=tabTwo/dt
dd class=panel style=display:none;Definition 2/dd
/dl
/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/
