Re: [css-d] Pure CSS Popups IE bug
Jeff Olin wrote:
I'm using Eric Meyer's Pure CSS Popups approach on my links page. I
have 3 sections on the same page; each section has its own set of
links and its own area for the popups. I want the popups to be
centered on the page, but IE7 pushes the text to the right for the
first two sections (the last section is centered). Firefox 2.0 renders
all 3 sections fine.
Here is the page:
http://cgmaille.com/test/links-test.html
The first thing I would try is to give hasLayout to your relative boxes
acting as reference for the absolutely positioned popups since IE has many
problems with non-hasLayout relative containing blocks [1].
So try with .links { zoom: 1 } and see if things become better.
BTW, in my IE6 the popups seem not to work at all, usually an extra hover
rule like
.links a:hover { border-width: 0; } gives IE6 a wake-up.
Hth,
Bruno
[1] http://www.satzansatz.de/cssd/onhavinglayout.html#rp
--
Bruno Fassino
http://www.brunildo.org/test
__
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 link menu -browser check
http://tinyurl.com/yq8nwz I have been trying to set this up with a horizontal li menu - it seems to be looking right in Firefox and IE7. Am wondering if the styles I have on here will hold up over other browsers. I know there will be issues if someone increases the text size, but am not sure how to deal with that in a horizontal menu like this. Any suggestions would be appreciated. __ 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] Span tags set to not display make containing div not display
CSS-d,
I have a div, ul, and span tags set up like this:
div id=test
spanI don't want this seen/span
ul
lia list thing/li
/ul
/div
My CSS declares:
#test span {
display: none
}
What I want is for the ul list to show, but not the text inside the
span tags.
But instead what happens is that everything inside the div does not
display.
Shouldn't the CSS apply to within the span tag, and leave the ul
tag, which comes after the closing /span, alone?
--
Dave M G
Ubuntu 7.04 Feisty Fawn
Kernel 2.6.20-15-generic
Pentium D Dual Core Processor
__
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] Boxes and Height
Hi All I recently asked for help on a site of mine regarding the height of boxes. I had many helpful replies. I realised that there were different techniques for doing what I was trying to achieve. Here are the results so far: http://www.swmug.co.uk/page-box/ One div used. Allowing the box to expand to any height. http://www.swmug.co.uk/page-dl/ DL and DT used to create the boxes http://www.swmug.co.uk/home-li/ One div used. Restricting the size of the box and using overflow: auto. http://www.swmug.co.uk/page-table/ Table used. All css is in this file: http://www.swmug.co.uk/wp-content/themes/snails/style.css What do you think is the best method please? The one that meets all accessible standards, font sizing and looks right in all browsers please? Which method would you encourage? Is there a right method in different places? Many thanks. -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ 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] font smoothing
I don't think there's anything you can do in the browser. Font smoothing is called the ClearType Tuning tool in Windows and it wasn't included automatically in IE 6 or Win XP. It is included automatically with IE 7. This affects the whole OS, not just the browser. It's a utility you can run to customize the settings and makes a big difference in viewing text on a LCD. I just tell my users to get it from Microsoft and install it ;-) This is a big issue for those using CRT (regular monitors, not LCDs). ClearType is only any use on LCD panels since it uses subpixel rendering, which doesn't exist on CRTs. So, in IE7 on a CRT monitor you have to switch it off, because otherwise the text is (in my opinion) harder to read, and looks pretty awful. Elsewhere in the thread someone already pointed out, correctly, that if you set up ClearType for the whole OS, then you get smoothed fonts in all applications, including Firefox. Making IE7 have ClearType on by default therefore both annoys people with CRTs (unless their eyesight isn't great, in which case it may appear better to them) and makes people think IE7 is better because it has font smoothing, when in fact any application can have it. -Simon -- Simon White, French Site Manager http://www.fr.lastminute.com le site de voyages et de loisirs 54/56 boulevard Victor Hugo - 93 585 Saint-Ouen Cedex Tél : +33 1 49 21 68 34 | Fax : +33 1 49 21 67 91 __ 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] IE 6 ignoring bottom margin for very last list item
On 4/22/07, Jason Chan [EMAIL PROTECTED] wrote: i ran into an issue trying to display some list items with images. the bottom margin for the last list item does not show in ie 6. is this a bug for floated list items with images? if so, what needs to be done so that it shows correctly in ie. heres my code: [...] I haven't tested with your code, but AFAIK IE/Win indeed loses a float's bottom margin when the float is enclosed without using an explicit cleared element (for example using a floated container, as you did.) If you don't want to add a clearing element in the markup you can try using a padding-bottom on the container instead of margin-bottom on the float... Hth, Bruno -- Bruno Fassino http://brunildo.org/test __ 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] border disappears!
Hello everybody I'm having an IE based problem with the following site. The thing is that parts of the double border around the main content area disappears when you scroll or resize the window. If you refresh the border is there again. Quite odd!! http://www.joelfinnstrom.se/playground/webbhuset/arvidsson/ Any help or tips is very very welcomed! /Joel Finnström __ 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] menu affect
HI Guys I'm wanting to produce a menu type affect that when a user rollsover a menu item an image slide out of the menu (similar to a drop down) I dont want this image to do anything just slide in and out of view depending o nthe hovering. Can anyone suggest a site that has implemented this affect (primarily in css) but flash or ajax would be fine! -- Regards Terry O'Leary Senior Web Developer @ Design Portfolio Marketing Services ~ Online Communities - www.unofficialfan.com ~Online dating community ? www.d8-m8.com ~ Widen your music www.hayseeddixies.com :: www.lil-chris.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] Content truncation in IE6 (re-post)
I have two columns side by side, and under some circumstances the left column is being cut off level with the bottom of the right column - it only seems to manifest when the left column is longer, so I never see this truncation in the right column. It only happens in IE6. It occasionally happens when the page is loaded for the first time for a given client browser. Hi Ian, I have had a very similar sounding problem, that to be honest I still don't really understand. I searched online and the closest thing I found a bug for this was the 'ALA cut-off bug', though for me the 'cures' did not fix it. I found in the end that applying position:relative; to the column that cut off seems to fix it. I got there largely through luck and through thinking that it was vaguely similar to the peekaboo bug, so tried that work around. So I can't explain why (aside from a usual bad tempered IE6 rant), but maybe this will work for you? Hope it helps, James __ 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] Span tags set to not display make containing div not display
Dave,
On Apr 23, 2007, at 2:47 AM, Dave M G wrote:
CSS-d,
I have a div, ul, and span tags set up like this:
div id=test
spanI don't want this seen/span
ul
lia list thing/li
/ul
/div
My CSS declares:
#test span {
display: none
}
What I want is for the ul list to show, but not the text inside the
span tags.
But instead what happens is that everything inside the div does not
display.
Shouldn't the CSS apply to within the span tag, and leave the ul
tag, which comes after the closing /span, alone?
Yes. I'm betting something else is wrong. Can you give us a url so
we can help debug?
Roger,
--
Roger Roelofs
[EMAIL PROTECTED]
__
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] menu affect
Terry O'Leary wrote: HI Guys I'm wanting to produce a menu type affect that when a user rollsover a menu item an image slide out of the menu (similar to a drop down) I dont want this image to do anything just slide in and out of view depending o nthe hovering. Can anyone suggest a site that has implemented this affect (primarily in css) but flash or ajax would be fine! Not sure quite what you want Terry, but perhaps you can find your desired look by building off of one of these: http://www.cssplay.co.uk/menus/index.html __ 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] Target Mozzilla Browsers
Is there anyway to target other Mozzilla Browsers separately like IE can be targeted. I would like to set, a tag set for FF with font min-width settings configured, and others for normal settings, if this can be done. You can target non IE with the same trick you use to target IE. If you need specific Firefox (and no other browsers) then you'll have to find a hack that works only for Firefox. I don't have one handy. But basically for min-width, then any browser that respects it should be OK, and hiding from IE can be done just the same like !-- [if !IE] --. -Simon -- Simon White, French Site Manager http://www.fr.lastminute.com le site de voyages et de loisirs 54/56 boulevard Victor Hugo - 93 585 Saint-Ouen Cedex Tél : +33 1 49 21 68 34 | Fax : +33 1 49 21 67 91 __ 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] menu affect
On 4/23/07, Don - HtmlFixIt.com [EMAIL PROTECTED] wrote: Terry O'Leary wrote: Can anyone suggest a site that has implemented this affect (primarily in css) but flash or ajax would be fine! Not sure quite what you want Terry, but perhaps you can find your desired look by building off of one of these: http://www.cssplay.co.uk/menus/index.html A couple of links that helped me when I looked into this sort of stuff: http://www.hesido.com/web.php?page=javascriptanimation and http://www.schillmania.com/content/projects/javascript-animation-1/ HTH, F. __ 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] font smoothing
On 2007/04/23 08:19 (GMT+0100) Simon White apparently typed: This is a big issue for those using CRT (regular monitors, not LCDs). ClearType is only any use on LCD panels since it uses subpixel rendering, which doesn't exist on CRTs. Subpixel rendering applies only to LCDs, but that's completely independent of applicability of ClearType. You can enable ClearType even when the OS has no idea what type of monitor you have, as when a display has broken or unimplemented DDC. So, in IE7 on a CRT monitor you have to switch it off, because otherwise the text is (in my opinion) harder to read, and looks pretty awful. I think it looks very much worse disabled than enabled on all my functional CRTs. See the screenshot examples in my upthread reply to the thread starter. Making IE7 have ClearType on by default therefore both annoys people with CRTs (unless their eyesight isn't great, in which case it may appear better to them) and makes people think IE7 is better because it has font smoothing, when in fact any application can have it. This only proves that ClearType can work on any display. -- Therefore, if anyone is in Christ, he is a new creation; the old has gone, the new has come!2 Corinthians 5:17 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.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] font smoothing
Felix Miata wrote: So, in IE7 on a CRT monitor you have to switch it off, because otherwise the text is (in my opinion) harder to read, and looks pretty awful. I think it looks very much worse disabled than enabled on all my functional CRTs. See the screenshot examples in my upthread reply to the thread starter. This is very subjective. ClearType is not simple anti-aliasing as such, rather a color trick. On low dpi monitors (esp 800*600 and below), a garish outline of disorienting colours is visible around each letter. For those of us who suffer from red-green sensitivities, this can be absolutely awful. On many systems I far prefer to have it turned off. Regards, Barney __ 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] font smoothing
On 2007/04/23 18:26 (GMT+0100) Barney Carroll apparently typed: Felix Miata wrote: I think it looks very much worse disabled than enabled on all my functional CRTs. See the screenshot examples in my upthread reply to the thread starter. This is very subjective. ClearType is not simple anti-aliasing as such, rather a color trick. On low dpi monitors (esp 800*600 and below), a There are only three screen colors, red, blue green, on any color computer display any of us are intimately familiar with, so everything is a color trick. garish outline of disorienting colours is visible around each letter. For those of us who suffer from red-green sensitivities, this can be absolutely awful. For most people this should be easy enough to fix by disabling lowfi. On my last several XP installs and even my last W2K install the installer set the resolution to 1024x768 all by itself, and I wasn't using any LCD panel with a native 1024x768 resolution to do it. I don't know why anyone using any OS made after 2001 would use 800x600 other than via misfortune and lack of knowledge to do anything about it. On many systems I far prefer to have it turned off. That's why it can be turned on and off. Real people do have system settings preferences that don't always match the defaults. Like with various other system and/or browser settings, whether anyone has it on or off you can't know, which means your decision to specify italic or not shouldn't be influenced by the fact that those options exist. -- Therefore, if anyone is in Christ, he is a new creation; the old has gone, the new has come!2 Corinthians 5:17 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.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] IE and CC problem
Hi, On this page http://www.geekministry.com/test/claus/reference1.php I wonder why the CC doesn't kick in. The images are too far right in IE6. Any help appreciated. Thanks __ 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] IE and CC problem
KJ'[EMAIL PROTECTED] wrote: Hi, On this page http://www.geekministry.com/test/claus/reference1.php I wonder why the CC doesn't kick in. The images are too far right in IE6. Any help appreciated. Thanks I don't think your CC is the problem. I think it's a source code issue. You are importing the style sheet after the CC, so the .thumbnail styles in the style sheet are overriding the CC. Try doing the import first, then the CC. Lori __ 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] Trouble styling a complex list item (includes illustration)
This picture is from my concept art. I'm having trouble getting it to work in my code in a cross browser fashion. The right-hand side is how I want it to look (left is just extra info): http://surrailism.com/filedump/listproblem.png Basically, we have a title, an excerpt (truncated to fit) and a date (DD/MMM). The date is floated left and the other contents of the 'li' roughly in the middle (vertically). Also, List items should change colour on hover (entire block). The div that the list is in is 31em+1em margin. It is one of two columns and is floated left. The layout is supposed to be completely zoomable. Everything is sized with ems- width, height, margin, padding, text-size, etc. Body is 62.5%, text-sizes range from 1em-3em. The em sizing is working really well everywhere else in the layout, but I can't figure out the combination of content, tags and css to make this list work in anything except FireFox. I'm looking for the best way to do this (HTML+CSS), to work with modern browsers and degrade nicely for others. Thanks for any help. __ 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/ IE7/Firefox placement problems.
It looks right in either ie6 or ie7 or firefox but not all three. What am I doing wrong? http://nitui.com/BI/ http://nitui.com/BI/images/style.css Thank you for your assistance. ~Mindy __ 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] Trouble styling a complex list item (includes illustration)
On 4/24/07, Gwyn Perry [EMAIL PROTECTED] wrote:
I'm looking for the best way to do this (HTML+CSS), to work with
modern browsers and degrade nicely for others.
This should work, and the code is about as minimal as it can be I
guess. This is just the bare bones, and obviously you can go ahead and
apply any colours or styles that you want.
HTML:
div
h4Section Heading Goes Here/h4
ul
li
h5Title Goes Here/h5
em21 Apr/em
pLorem ipsum dolor sit amet, consehellip;/p
/li
/ul
/div
CSS:
div {
width: 31em;
margin: 1em;
}
ul {
list-style: none;
}
li {
position: relative; /* This is a positioning hook for the EM element */
padding-left: 3em; /* Width of EM element + whatever space you want
around it */
}
em {
position: absolute;
top: 0;
left: 0;
width: 2em;
}
--
Australian Web Designer - http://www.blakehaswell.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] ie6/ie7 float problem?
Hi, http://jg2.intellit.nl/overmij.html is simple header / content (2 columns) / footer page. The columns are giving me an headache, because in IE6 and IE7 the right column goes under the left column (instead of beside it). FF does show the page correctly, and this is the result I'm looking for. Anyone have an idea what i might be doing wrong here? I've been coding for hours, and might have overlooked it. Direct css: http://jg2.intellit.nl/css/jg.css (look for the content sidebar tags) Thanks, any help is very much appreciated. -- Jeroen __ 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] font smoothing
Barney Carroll wrote: Felix Miata wrote: So, in IE7 on a CRT monitor you have to switch it off, because otherwise the text is (in my opinion) harder to read, and looks pretty awful. I think it looks very much worse disabled than enabled on all my functional CRTs. See the screenshot examples in my upthread reply to the thread starter. This is very subjective. ClearType is not simple anti-aliasing as such, rather a color trick. On low dpi monitors (esp 800*600 and below), a garish outline of disorienting colours is visible around each letter. For those of us who suffer from red-green sensitivities, this can be absolutely awful. On many systems I far prefer to have it turned off. Anyway, since this is something done at the client end, neither CSS nor Javascript as any way to change it. -- 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] font smoothing
david wrote: Barney Carroll wrote: Felix Miata wrote: So, in IE7 on a CRT monitor you have to switch it off, because otherwise the text is (in my opinion) harder to read, and looks pretty awful. I think it looks very much worse disabled than enabled on all my functional CRTs. See the screenshot examples in my upthread reply to the thread starter. This is very subjective. ClearType is not simple anti-aliasing as such, rather a color trick. On low dpi monitors (esp 800*600 and below), a garish outline of disorienting colours is visible around each letter. For those of us who suffer from red-green sensitivities, this can be absolutely awful. On many systems I far prefer to have it turned off. Anyway, since this is something done at the client end, neither CSS nor Javascript as any way to change it. Wow, Night of the living thread, Son of Thread and Thread from the black lagoon - Triple Feature. Anyway, since this is something done at the client end, neither CSS nor Javascript as any way to change it. Let them eat straight type. It's not a life or death situation, as I stated in the OP, I hate the way it looks in FF with out clearType. As it stands I'm using display :none on the real text and a background image for the pretty text. Just another one of those things I guess. - DJS __ 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] having issues with direction from right to left
Hey all, I trying to write this: div style=direction:rtltest (99)/div but this is what appears: (test (99 any idea how I could make it look like: test (99)? thanx in adance Pat __ 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] Side-by-side positioning with css
Good Evening;
If anyone has a bit of time, please look at the schematic(on the left) and
three links(on the right) at the bottom of the page at
http://www.edi-cp.com/estimator/edi_at_calculator.html
This is my first attempt to use CSS to position items on a page. They are
where I want them, but I don't like the idea of using a width of the div
to force the two columns close together.
Is there a better way of getting the two spans to appear side-by-side
centered on the page with a small space separating them?
I could easily do this with a table, but I am trying to move away from that
style of coding.
Here is the relevant CSS
.schematic {
width: 80%;
font-family: EuroseWide Heavy, Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 200%;
color: #A0;
}
.schematic1 {
text-align:center;
float: left;
}
.schematic2 {
text-align:left;
float: right;
}
Thanks for any comments.
Del
__
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] IE 6.0 issue - background extending to far
Hi -
This page looks great in FF -
http://virt11a.secure-wi.com/%7Eadmin100/index.php?module=pagemasterPAGE_user_op=view_pagePAGE_id=1
In IE 6.0 the light green boxes at the top and bottom of the left hand vertical
menu expand beyond where they should. They should line up with the menu
options between them.
The view code in the page shows (I cut out only the menu part of the code):
td class=left_col valign=top
table cellpadding=0 cellspacing=0 width=90px border=0
tr
td class=nav_titleAbout Us/td
/tr
trtd
table class=leftnav cellpadding=0 cellspacing=1tr
td align=left nowrap=nowrap
a
href=./index.php?module=pagemasteramp;PAGE_user_op=view_pageamp;PAGE_id=11amp;MMN_position=2:2History/a
/td
/trtr
td align=left nowrap=nowrap
a
href=./index.php?module=pagemasteramp;PAGE_user_op=view_pageamp;PAGE_id=12amp;MMN_position=3:3Membershipbr
/Benefits/a
/td
/tr
/table/td
/tr
!-- BOTTOM MENU --
tr
td class=nav_titlenbsp;/td
/tr
/tablebr /
/td
The class nav_title formats the light green areas at the top and bottom of the
menu:
.nav_title {
font-size: 10px;
font-weight: bold;
background-color: #99;
padding: 9px 1em 9px 1.5em;
text-transform: uppercase;
display: block;
text-align: left;
width: 88px;
margin-left: 7px;
}
The full css file is found here:
http://virt11a.secure-wi.com/%7Eadmin100/themes/Default/style.css
I've tried modifying padding and margins, but that doesn't seem to work. I'm a
css novice and I'm not sure what else to try.
Thank you for your time and pointers,
Barb
__
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] Side-by-side positioning with css
If anyone has a bit of time, please look at the schematic(on the left) and three links(on the right) at the bottom of the page at http://www.edi-cp.com/estimator/edi_at_calculator.html Is there a better way of getting the two spans to appear side-by-side centered on the page with a small space separating them? Hi Del, You must assigned a width for the floats .schamatic1 and .schematic2 in order to force they appear side by side. Try set 45% for both floats and this will result in a 10% gap between them. Maurício Samy Silva http://www.maujor.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] having issues with direction from right to left
On Tue, 24 Apr 2007, Patrick Aljord wrote: I trying to write this: div style=direction:rtltest (99)/div but this is what appears: (test (99 At the character level, what appears is )test (99 but the leftmost character ) is displayed using a mirrored glyph. You can see this if you copy the leftmost character into a plain text file using copy and paste. The appearance is what you asked for by using direction:rtl. By the Unicode bidirectional algorithm (which is what the definition of the direction property refers to), the writing direction is primarily determined by the inherent directionality of characters. The directionally neutral characters and ( follow the directionality of surrounding characters, which is left to to right. However, the last character ) is not trapped between characters with left to right directionality, so the browsers does just what you asked: treats it with right to left directionality. This means that it will be placed to the left of the preceding text and mirrored. Appending a directionally neutral punctuation character like . would not change this. It would be placed to the left of the preceding character. But if you append a character with inherent left to right directionality, like a Latin letter or a common (European) digit, things would change. There is also an invisible control character for the purpose, the left to right mark (LRM, U+200E), representable in HTML as lrm; among other things. any idea how I could make it look like: test (99)? Well, you could simply leave out the setting direction:rtl. If the enclosing element has direction:rtl, then you would need to explicitly set direction:ltr to prevent inheritance. In any case, if you want text to be rendered left to right, you set (or default) the direction property to the value ltr. What did you expect the direction:rtl setting to affect, and why did you use it? If you just want alignment to the right (which is a default side effect of direction:rtl), set it explicitly, using text-align: right. -- Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/ __ 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/
