Re: [css-d] Reposting: Absolute Floated Layout
Elli Vizcaino wrote: ... Is there a way to combine floated divs with absolute positioned divs for layout, without having the page behave erratically across several browsers? The pages (both are live samples of the templates we work with) in question are: http://www.nj.com/news/ http://www.pennlive.com/lehighvalley/nce.net/impact/index.ssf The company I work for would like the content area (FEATURED STORY/ALL STORIES FROM [DATE]:) column to appear at the top of the HTML document, right after the body tag for SEO purposes. While still retaining the look of the current layout. You can rearrange a float-based 3 column layout to an 2-1-3 or 3-1-2 source ordered layout by the use of negative margins, see [1, 2]. The main container holding these columns, coming first in the source, may leave some em-margin above. Coming later in the source, the header element may be positioned absolutely on top of the main container. (Inside the header, you may swap the order by using position:absolute, too.) The first element in body should then be a skip-to-navigation link. In addition, a skip-to-advertisement link may be semantically correct, but is not necessarily helpful in the real world. Ingo [1] http://www.alistapart.com/articles/negativemargins [2] http://www.positioniseverything.net/articles/onetruelayout/ -- http://www.satzansatz.de/css.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] Reposting: Absolute Floated Layout
Elli Vizcaino wrote: http://www.nj.com/news/ The company I work for would like the content area (FEATURED STORY/ALL STORIES FROM [DATE]:) column to appear at the top of the HTML document, right after the body tag for SEO purposes. While still retaining the look of the current layout. As with all layouts that use absolute positioning to reposition large parts containing text, the result depends entirely on to what degree you have control of the dimensions of elements that should appear _above_ the element(s) you want first in the source-code. Usually that control is lost if/when font resizing options are used in browsers. However, if you can work your way around that and provide a suitable space for the top-stuff also when the layout is subjected to font resizing, then the rest is just a matter of arranging and wrapping floats - as Ingo has already pointed out. FWIW: I don't think there's a need to flag limited browser-support, as all major browsers today will handle a layout like that - in any order. I don't use any of the supported browsers on a regular basis, but the ones I use have no problem with the existing layout, and won't have any with a properly built rearranged version either. 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] simple css question
I was trying to help a friend with a layout and ran into something. The
page is XHTML 1.0 Strict, btw. He wants a 40px tall header with two cells,
50% each. Sounds simple, and it works as expected in FF 2.0, with two cells
side-by-side. In IE 7, the right cell drops under the left cell, instead of
staying next to it. Below is the CSS and relevant html. Does 50% x 2 not
equal 100% in IE 7?
body {
border: 0;
margin: 0;
padding: 0;
color: #000;
background: #FFF;
}
#container {
width: 100%;
margin: 0 auto;
}
#headerLeft, #headerRight {
height: 40px;
width: 50%;
}
#headerLeft {
float: left;
background: #F00;
}
#headerRight {
float: right;
background: #0F0;
}
div id=container
div id=header
div id=headerLeft/div
div id=headerRight/div
/div
/div
__
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] css-d Digest, Vol 57, Issue 20
I'm trying to a page using BlueprintCSS that provides the content first, in the source order; it works in FF, Safari, and Opera 9 and even IE7, but IE6 falls over with how it handles the float right column. http://stage.chrisadams.me.uk/blueprint/example.html I couldn't see the version in the css - do you use the latest v0.4 of blueprint? It handles certain IE6 issues. Gruss, Ingo Hi Gruss, After some more research, I think my hacking around with blueprint ( I was using 0.4) to allow content first in the source order has made me come a cropper on the IEWin double margin bug. http://www.positioniseverything.net/explorer/doubled-margin.html Will investigate more tonight when I'm back from work. __ 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] Reposting: Absolute Floated Layout
Le Mon, 20 Aug 2007 03:55:11 +0200, Elli Vizcaino [EMAIL PROTECTED] a écrit: Is there a way to combine floated divs with absolute positioned divs for layout, without having the page behave erratically across several browsers? The pages (both are live samples of the templates we work with) in question are: Hi, I haven't the answer, only the same issue on my layout. Il have positionned div's for layout purposes and I tried to float some div in it... So it seems that the width's are completly wrong accross browsers (even Opera and Firefox give differents results !!!) I just replace all floating div by positionned div, and it works. -- http://www.css4design.com/ http://www.notoriousblog.fr/ http://carnets.notoriousblog.fr/ __ 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] Site Review Request (Win IE 5.5, 6 and Mac)
Thanks to EVERYONE who helped with this a few days ago! I've had a sick Dachsund and I'm getting ready for an interstate move, so things have been hectic. I appreciate this incredible list! Francesco Sanfilippo, CEO S I N C I T Y C R E A T I V E http://www.sincitycreative.com On 8/18/07, Francesco (Sin City Creative) [EMAIL PROTECTED] wrote: Hi guys! A new css-based site I did most of the work on is online. Looks flawless and as intended on Windows IE 7 and Windows Firefox 2. I ned some help with: Windows - Opera, IE 5.5 and IE 6 Mac - Common browsers http://newsite.omedix.com/ http://newsite.omedix.com/Styles/OmedixStyles.css Thanks in advance! Francesco __ 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] 5 column 5 row table
Generator Microsoft Word 11 (filtered medium) I' m trying to recreate a five column, 5 row table using CSS which is fluid(resizes with browser dimensions), similar to this one (code below) but using CSS is driving me mad! Sometimes it works in Firefox but doesn' t render in IE and vice-versa. I can' t use margin.left: with different values as IE doesn' t like it. Should I use float for the first column and then float again for the second column etc? Should I work across then down or down then across? Should I have separate divs each holding each image and surrounding text? So many questions and so many problems!! table width=45% border=0 cellspacing=0 cellpadding=10 tr td width=31%img src=file:///P|/Accessibility/Images for new course/image8.jpg width=141 height=113 //td td width=14%Text here /td td width=8%nbsp;/td td width=32%img src=file:///P|/Accessibility/Images for new course/image8.jpg alt=quot;quot; width=141 height=113 //td td width=15%Text here /td /tr tr tdnbsp;/td tdnbsp;/td tdnbsp;/td tdnbsp;/td tdnbsp;/td /tr tr tdimg src=file:///P|/Accessibility/Images for new course/image8.jpg alt=quot;quot; width=141 height=113 //td tdtext here /td tdnbsp;/td tdimg src=file:///P|/Accessibility/Images for new course/image8.jpg alt=quot;quot; width=141 height=113 //td tdText here /td /tr tr tdnbsp;/td tdnbsp;/td tdnbsp;/td tdnbsp;/td tdnbsp;/td /tr tr tdimg src=file:///P|/Accessibility/Images for new course/image8.jpg alt=quot;quot; width=141 height=113 //td tdText here /td tdnbsp;/td tdimg src=file:///P|/Accessibility/Images for new course/image8.jpg alt=quot;quot; width=141 height=113 //td tdtext here /td /tr /table Regards Gary __ 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] Beginner: img distances
Dear list, obviously a simple matter, but I'm stuck. On http://web-bereiter.de/chobocca.com/chobocca.html I'd like to put the menu-bar images one by one without any space. I tried to give them a class with 0px margin/padding and other measures - but there are still some pixels inbetween them. What is wrong here? Appreciate any hints. Regards, Ingo __ 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] 5 column 5 row table
I' m trying to recreate a five column, 5 row table using CSS I'll leave the other semantic issues to more experienced heads, but are you certain your data isn't really tabular, making a table the correct tool? joel __ 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] simple css question
Does 50% x 2 not equal 100% in IE 7? Quite often, it doesn't, since IE has emotional issues with padding due to some childhood trauma. See http://www.positioniseverything.net/explorer/floatIndent.html or this list's archives (where would those be, I wonder?) for more details. joel __ 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] simple css question
Joel D Canfield wrote: ... this list's archives (where would those be, I wonder?) for more details. http://css-discuss.incutio.com/?page=SearchCssDiscussList Ingo -- http://www.satzansatz.de/css.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/
[css-d] IE6 and older float problem
I have a problem with floats when using IE 6 and older. The pages involved are: http://www.ragonline.co.uk/news/story/8 Hope somebody suggest a bug fix for this problem, thanks. Lyn Williams __ 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] best javascript flyouts
Colleagues, Just wanted to put out a message looking for feedback on what the best free internet sites are for javascript flyout menus. Thanks very much, Raumin Ray Dehghan Adult Services Librarian West Chicago Public Library West Chicago, Illinois __ 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] Beginner: img distances
Ingo wrote: Dear list, obviously a simple matter, but I'm stuck. On http://web-bereiter.de/chobocca.com/chobocca.html I'd like to put the menu-bar images one by one without any space. I tried to give them a class with 0px margin/padding and other measures - but there are still some pixels inbetween them. What is wrong here? Appreciate any hints. Regards, Ingo Simple that works is difficult. Complex that fails is easy. /One way/ to close the gap is to run the markup of the four items as one continuous string-- rather than stacking them as you have. Don't forget to run your page through the w3c markup [1] and css [2] validation services. [1] http://validator.w3.org/ [2] http://jigsaw.w3.org/css-validator/ 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/
Re: [css-d] Beginner: img distances
On 8/20/07, Ingo [EMAIL PROTECTED] wrote: I'd like to put the menu-bar images one by one without any space. It looks like you've got the as in there all by themselves, and since they're inline elements by default, the browser parses any whitespace--including new lines--as spaces between the elements. So the space you're seeing between them actually /is/ a space. It's like if you had a sentence with four links in it, e.g., aHere/a aare/a asome/a alinks/a. (I don't know how Gmail's going to parse that last sentence, so imagine all the words in Here are some links are enclosed in anchor tags.) You've got at least a couple of options here: 1) You could just put all the links on one line, all mashed together; ugly, hard to edit, but it works 2) You could float the links left 3) You could enclose the links in a list of some sort, as is often done with navigation links these days. Good luck! :Dan Dorman __ 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] Fwd: CSS Spacing
Well I would, but was hoping to use an image for the border tho... Anyone able to help on the spacing issues? Thanks, H On 18/08/07, E Michael Brandt [EMAIL PROTECTED] wrote: No doubt the issue is with this very odd li you have in there to create a border: li style=background-image: url(divide.png); height: 1px; margin:0px; padding: 0px;/li Since this li has no use other than to create a line, and since it is sure to confuse folks using screen readers, why not remove it, add an id to the first li and style it with a bottom-border? -- E. Michael Brandt www.divaHTML.com divaGPS : you-are-here menu highlighting divaFAQ : FAQ pages with pizazz www.valleywebdesigns.com JustSo PictureWindow JustSo PhotoAlbum __ 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] Repost: CSS Spacing
Hi everyone, I'm having what I think might be a well known problem with IE, but have tried all the usual solution to no avail. My CSS menu at www.henryfelton.net/ca has mysterious white space between the lis. FF shows exactly what is wanted in terms of spacing, with a dividing bar 1px high (anyone think of a better way of doing this?) but, again, IE6 manages to lose the 1px requirement, and IE7 the entire li! Any help would be appreciated. Thanks, Henry __ 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] Repost: CSS Spacing
I'm having what I think might be a well known problem with IE, but have tried all the usual solution to no avail. My CSS menu at www.henryfelton.net/ca has mysterious white space between the lis. FF shows exactly what is wanted in terms of spacing, with a dividing bar 1px high (anyone think of a better way of doing this?) but, again, IE6 manages to lose the 1px requirement, and IE7 the entire li! -- Hi Henry, Instead of adding the background image and empty (superfluous) list items, you could just use a bottom border on the #navigation li elements. Alternatively you could put the background image on there using a 1px image set to left bottom repeat-x, with the desired main background color stated after it to fill the rest of the li space. Adding padding:0; to the same element should sort out the spacing issues. Also I noticed that you have href attributes in your img tags which is causing validation failure. Hope that 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/
[css-d] Inline list IE7 problem
Hey everyone, It's been a while since I posted. I'm having a weird problem with a inline list menu I'm building. The last li item seems to have something pushing it up about 2 pixels, thus throwing off all the padding and :hover. I've clipped it out and isolated it, but it stills seems to be doing the same thing. Could someone give me a fix or tell me what it's doing? HTML file: http://www.uark.edu/depts/gradinfo/mockup/graduate4/menutest.html CSS file: http://www.uark.edu/depts/gradinfo/mockup/graduate4/menutest.css Thanks ahead, Boddie --- David Boddie, Webmaster, Graduate School University of Arkansas | #6 Dickson Street Annex Fayetteville, Arkansas 72701 Phone: 479-575-6184 | email: [EMAIL PROTECTED] http://www.uark.edu/grad --- __ 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] Footerstick, and transparent absolute background
Thank you for taking the time to consider my problem. QUESTIONS? 1. How can an absolutely positioned background div be effected by relative and floated divs not contained in it? 2. Is there a better approach to achieving the layout I am attempting? I am trying to combine the footer stick technique with faux columns and opacity on this page: http://sandboxv3.erau.edu/pr/0pr-dev/index.html #page and #nonfooter are used to achieve the 100% height. The footer which is outside #page and #nonfooter would not be visible without a negative top margin to bring it in to the window. Code borrowed from: http://www.themaninblue.com/writing/perspective/2005/08/29/ I can't use #page and #nonfooter for the faux columns because the columns must be transparent to allow the clouds image (body background image) to show through. If I make either either of these dives transparent then all the page content contained in them becomes transparent also. The only solution I have come up with is a transparent absolute div centered with a repeating image to create the columns. Since the footer would always be at the bottom of the window, I should not have the problem of the faux columns showing under the footer. To see the problem resize window so that the footer in no longer visible and scroll to the bottom. The background absolute div is somehow shortened and does not reach the footer. Strangely in IE6 if you refresh the page the div magically extends to the footer until you resize the window again. Here is my structure. Everything validates except the opacity properties. body div id=columns/div div id=page div id=nonFooter div id=header ...stuff /div!--END HEADER-- div id=content div id=contentMain/div div id=section_navstuff/div div class=clearer/div /div!-- END content -- /div!-- END nonFooter -- /div!-- END page -- div id=footerstuff/div /body /html Arnold Gregory IT Web Services Embry-Riddle Aeronautical University 386-323-8696 __ 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] Inline list IE7 problem
On 8/20/07, David Boddie [EMAIL PROTECTED] wrote: It's been a while since I posted. I'm having a weird problem with a inline list menu I'm building. The last li item seems to have something pushing it up about 2 pixels, thus throwing off all the padding and :hover. I've clipped it out and isolated it, but it stills seems to be doing the same thing. Could someone give me a fix or tell me what it's doing? HTML file: http://www.uark.edu/depts/gradinfo/mockup/graduate4/menutest.html after running my tried-n-true method of keep deleting lines and refreshing until ie gets it right, i found that ie7's problem is (at least) with your font-variant: small-caps; rule. i can't tell you what ie7's hang up is, but the menu lines up again after deleting that rule. __ 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 and older float problem
Lyn Williams wrote:
I have a problem with floats when using IE 6 and older.
http://www.ragonline.co.uk/news/story/8
Under certain conditions IE6 has problems with selectors like this...
#maincontent.mainlayout {
width: 679px;
}
...but will work fine if given the following, simplified, version...
.mainlayout {
width: 679px;
}
For older IE/win versions you'll also have to work around the standard
vs. quirks box-model difference...
http://www.w3.org/International/articles/serving-xhtml/Overview.en.php#quirks
You can either...
1: feed the old versions different width for all containers that have
both width and side-paddings, since paddings are not added to width in
the IE/win quirks mode box-model.
2: delete side-paddings on elements that has a width, and give all
browsers a new width. This usually means replacing side-paddings with
side-margins where horizontal spacing is needed, and generally avoid
situations where box-model differences create problems.
Note: it is always easier to debug layouts when the source-code is up to
the declared standard. Most of the 57 errors are non-essential and
script induced, but at least one ID - #content - is lost in there...
http://validator.w3.org/check?uri=http://www.ragonline.co.uk/news/story/8
...in case you want to use it.
This is more like it for that doctype...
http://www.gunlaug.no/tos/alien/lw/test_07_082002.htm
...and validity does help at this stage...
http://validator.w3.org/check?uri=http://www.gunlaug.no/tos/alien/lw/test_07_082002.htm
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] Inline list IE7 problem
At 01:47 PM 8/20/2007, cj wrote: On 8/20/07, David Boddie [EMAIL PROTECTED] wrote: It's been a while since I posted. I'm having a weird problem with a inline list menu I'm building. The last li item seems to have something pushing it up about 2 pixels, thus throwing off all the padding and :hover. I've clipped it out and isolated it, but it stills seems to be doing the same thing. Could someone give me a fix or tell me what it's doing? HTML file: http://www.uark.edu/depts/gradinfo/mockup/graduate4/menutest.html after running my tried-n-true method of keep deleting lines and refreshing until ie gets it right, i found that ie7's problem is (at least) with your font-variant: small-caps; rule. i can't tell you what ie7's hang up is, but the menu lines up again after deleting that rule. Thanks, cj. It's odd, I had decided to use small-caps, but to keep the text the same height, I used all lower-case in the a link. But, when I went back to the HTML, and capitalized the words, the error goes away, and the text changed size. Boddie __ 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] Inline list IE7 problem
David Boddie wrote:
Hey everyone,
It's been a while since I posted. I'm having a weird problem with a
inline list menu I'm building. The last li item seems to have
something pushing it up about 2 pixels,...
You've already changed your test case. Here is a bug reduction. The li
itself is pushed up if the span inside does not contain a space.
Ingo
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
title/title
style type=text/css
ul {
float:left;
list-style: none;
border-bottom:1px solid red;
}
li {
float: left;
display:inline;
margin: 0 1em;
border-bottom:1px solid green;
}
span {
display: block;
font-variant: small-caps;
}
/style
/head
body
ul
lispanlorem ipsum/span/li
lispandolor/span/li
lispansit amet/span/li
/ul
/body
/html
--
http://www.satzansatz.de/css.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/
