[css-d] Help with floats in IE mac
Hi everyone, I wondered if someone could help me find a fix for floats in internet explore for the mac. On the following two pages: http://www.officelinkonline.com.au/gwh/frames.htm and http://www.officelinkonline.com.au/gwh/services.htm ...the floats won't float to where they're supposed to in this browser. In the frames page the unordered list should be up under the word advantage, while in the services page both the unordered lists should be up to the right of the image. Is there some bug in IE mac that's causing this to happen and if so is there a fix? Also, the maindiv has a height of 500px. It renders this way in all browsers except for IE mac where it's somewhat larger in height. Why is this browser adding the extra height? Any help or tips here much appreciated. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] help positioning
hello all,
i'm trying to make csszengarden template, well right now i'm lil bit
frustated with positioning between IE and Firefox anyone can give me a clue
please
take a look on this screenshot http://www.bramvera.com/positioning.jpg
#quickSummary .p2 {
position: absolute;
top: 110px;
width: 280px;
text-align: right;
margin-left: 405px;
}
#quickSummary .p1 {
position: absolute;
top: 190px;
width: 158px;
margin-left: 342px;
text-align: right;
line-height: 14px;
}
IE hack or FF hack?
appreciated lots!
Thanks in advance,
Bram
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] MSIE li menu problem
Hi everyone, I made a simple menu with a olli .../lili.../li[]/ol structure. It's at http://www.pool.ntp.org/ (css at http://www.pool.ntp.org/css/ ntppool.css) It works great in Safari and Firefox: http://tmp.askask.com/2005/09/pool-safari.png But in MSIE each li is the width of the window and stacked below each other: http://tmp.askask.com/2005/09/pool-msie.png Help! :) - ask ps. thanks everyone for this list. I've been participating on far too many lists and online forums since the early nineties and this one really stands out as being exceptionally friendly and useful. You are all great (and beautiful, I'm sure). :-) -- http://askask.com/ - http://develooper.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] MSIE li menu problem
Ask Bjørn Hansen wrote: Hi everyone, I made a simple menu with a olli .../lili.../li[]/ol structure. It's at http://www.pool.ntp.org/ (css at http://www.pool.ntp.org/css/ ntppool.css) It works great in Safari and Firefox: http://tmp.askask.com/2005/09/pool-safari.png But in MSIE each li is the width of the window and stacked below each other: http://tmp.askask.com/2005/09/pool-msie.png Give those floats an explicit width. Standards compliant browsers do a good job of calculating the implied widths. IE doesn't. -- Bob Easton Accessibility Matters: http://access-matters.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help positioning
Bram Vera wrote:
hello all,
i'm trying to make csszengarden template, well right now i'm lil bit
frustated with positioning between IE and Firefox anyone can give me a clue
please
take a look on this screenshot http://www.bramvera.com/positioning.jpg
#quickSummary .p2 {
position: absolute;
top: 110px;
width: 280px;
text-align: right;
margin-left: 405px;
}
#quickSummary .p1 {
position: absolute;
top: 190px;
width: 158px;
margin-left: 342px;
text-align: right;
line-height: 14px;
}
You're not making this very easy for us. We have to go somewhere else to
determine what p1 and p2 are, and we have to guess at which result you
actually prefer. Debugging from screen shots and small code clips is
nearly impossible. There are lots of other variables we don't see with
just a tiny clip of code. For example, what other adjustments have you
made elsewhere for font size, for line height, and for paragraph margins.
From what little I see here, I think the basic problem is either with
font sizing techniques, or with paragraph margin-top settings (defalut
or otherwise). Additionally, I think you'll find absolute positioning
far too fragile for this application. The first time someone resizes
text in their browser, overlaps are very likely.
--
Bob Easton
Accessibility Matters: http://access-matters.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] MSIE li menu problem
On Sep 12, 2005, at 3:51 AM, Choan C. Gálvez wrote: It's at http://www.pool.ntp.org/ (css at http://www.pool.ntp.org/ css/ ntppool.css) [] Give those floats an explicit width. Standards compliant browsers do a good job of calculating the implied widths. IE doesn't. Or, give them a `display` of `inline-box`. Check this: http:// www.fu2k.org/alex/css/cssjunk/FloatInlineBlock.html Yay. That worked. Beautiful, thank you. - ask -- http://askask.com/ - http://develooper.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Variation on off-site links - need help
Alun Rowe wrote: Otherwise indent the link by 10px and add a 10px background image no-repeat align left. Yes, makes sense, actually - stick the image on the LEFT... Probably 'reads' better on the web page too: when you do a quick scan down the list, you see the new items straight away. Don't know whether that'll suit John, but *I* like it!! :) cheers, Stuart __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help positioning
Hello Bob,
i'm sorry for that, i just uploaded in here
http://www.bramvera.com/csszengarden_project1/zengarden-sample.html
http://www.bramvera.com/csszengarden_project1/style.css
i'm still new with css layout need help
regards from Bali
Bram
On 9/12/05, Bob Easton [EMAIL PROTECTED] wrote:
Bram Vera wrote:
hello all,
i'm trying to make csszengarden template, well right now i'm lil bit
frustated with positioning between IE and Firefox anyone can give me a
clue
please
take a look on this screenshot http://www.bramvera.com/positioning.jpg
#quickSummary .p2 {
position: absolute;
top: 110px;
width: 280px;
text-align: right;
margin-left: 405px;
}
#quickSummary .p1 {
position: absolute;
top: 190px;
width: 158px;
margin-left: 342px;
text-align: right;
line-height: 14px;
}
You're not making this very easy for us. We have to go somewhere else to
determine what p1 and p2 are, and we have to guess at which result you
actually prefer. Debugging from screen shots and small code clips is
nearly impossible. There are lots of other variables we don't see with
just a tiny clip of code. For example, what other adjustments have you
made elsewhere for font size, for line height, and for paragraph margins.
From what little I see here, I think the basic problem is either with
font sizing techniques, or with paragraph margin-top settings (defalut
or otherwise). Additionally, I think you'll find absolute positioning
far too fragile for this application. The first time someone resizes
text in their browser, overlaps are very likely.
--
Bob Easton
Accessibility Matters: http://access-matters.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org http://evolt.org --
http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE form/layer render bug?
On 9/12/05, Albert van der Veen [EMAIL PROTECTED] wrote: Hello list, Please have a look at this page: http://www.isso.demotypo3.nl/isso-digitaal/vrijblijvend-kennismaken/ If you tab through the form on this page and get to the bottom of the form, the form suddenly shifts up. In IE6 that is, Firefox is ok. Anyone know what causes this? It doesn't in my IE6 - nor any other browser. Unless you mean that if the focus is on the submit button (the last form field) and you press tab, the focus goes to the first link on the frame: Well that is because IE has the most increadibly brain-dead UI ever invented in that a single key navigates both form elements and links, which of course have nothing in common. Tabbing past the last field in a form should take you back to the first field in the form. (or to the next form if there are multiple forms on a page). -- Richard Grevers New Plymouth, New Zealand Orphan Gmail invites free to good homes. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE form/layer render bug?
Hello Richard, Strange - do you have a very high resolution and thus no scrollbar to the right? I have uploaded two screenshots to show you what happens: before tabbing down: http://www.jipscompany.com/files/screen_good.gif and after: http://www.jipscompany.com/files/screen_bad.gif Albert At 02:15 PM 9/12/2005, you wrote: On 9/12/05, Albert van der Veen [EMAIL PROTECTED] wrote: Hello list, Please have a look at this page: http://www.isso.demotypo3.nl/isso-digitaal/vrijblijvend-kennismaken/ If you tab through the form on this page and get to the bottom of the form, the form suddenly shifts up. In IE6 that is, Firefox is ok. Anyone know what causes this? It doesn't in my IE6 - nor any other browser. Unless you mean that if the focus is on the submit button (the last form field) and you press tab, the focus goes to the first link on the frame: Well that is because IE has the most increadibly brain-dead UI ever invented in that a single key navigates both form elements and links, which of course have nothing in common. Tabbing past the last field in a form should take you back to the first field in the form. (or to the next form if there are multiple forms on a page). -- Richard Grevers New Plymouth, New Zealand Orphan Gmail invites free to good homes. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout fails in Konqueror
Hello! Id like to make a 'flexible' design, which should - scale down well for small screen devices (handy, pda, s.o.). - display well on normal screen sizes (from 800x600 up to whatever). - not totally break, if user changes font-size (in Moz, FF and IE - don't know anything about other browsers, except Opera, which zooms the whole site). There for I decided to make a two-column layout (with the main-col first in source and the possibility to easily switch the side-col from left to right). The (basic) structure is: * page-wrapper * header * cols-wrapper (assigned the 'clearfix' method to not having the need for an extra clearing-div) * main-col (is floated to the left or right for being first in source) * side-col (is floated to the other side than the main-col) * footer The page-wrapper has a max-width. Widths for main- and side-col are set in percents, font-size in EMs. For the effect of equal-height columns I used the faux-column technique. Here you'll find a (working-)example of the page: http://top-topics.com/test-temp/index.html and the layout css-file: http://top-topics.com/test-temp/css-files/layout.css I've registered a trial account at browsercam.com! As you can see (http://www.browsercam.com/public.aspx?proj_id=190176) on picture 23 and 24 the layout totally breaks in Konqueror. I don't know much about this browser (and his bugs) so any hints are welcome, as well as any other suggestions for making the layout more 'robust'. Or what method would you choose to make it a three-column layout (with the flexibility to switch back to 2-cols simply by style)? Best regards Gunther PS: Wenn hier jemand aus dem deutschsprachigen Raum kommt, der Lust hat, mit mir eine deutschsprachige CSS-Seite (Tutorials, Einführung, Beispiele, Experimentelles) zu machen, oder über CSS-Dinge mal gemeinsam nachzudenken, der möge sich bitte melden - Danke! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout fails in Konqueror
Hello! Id like to make a 'flexible' design, which should - scale down well for small screen devices (handy, pda, s.o.). - display well on normal screen sizes (from 800x600 up to whatever). - not totally break, if user changes font-size (in Moz, FF and IE - don't know anything about other browsers, except Opera, which zooms the whole site). There for I decided to make a two-column layout (with the main-col first in source and the possibility to easily switch the side-col from left to right). The (basic) structure is: * page-wrapper * header * cols-wrapper (assigned the 'clearfix' method to not having the need for an extra clearing-div) * main-col (is floated to the left or right for being first in source) * side-col (is floated to the other side than the main-col) * footer The page-wrapper has a max-width. Widths for main- and side-col are set in percents, font-size in EMs. For the effect of equal-height columns I used the faux-column technique. Here you'll find a (working-)example of the page: http://top-topics.com/test-temp/index.html and the layout css-file: http://top-topics.com/test-temp/css-files/layout.css I've registered a trial account at browsercam.com! As you can see (http://www.browsercam.com/public.aspx?proj_id=190176) on picture 23 and 24 the layout totally breaks in Konqueror. I don't know much about this browser (and his bugs) so any hints are welcome, as well as any other suggestions for making the layout more 'robust'. Or what method would you choose to make it a three-column layout (with the flexibility to switch back to 2-cols simply by style)? Best regards Gunther PS: Wenn hier jemand aus dem deutschsprachigen Raum kommt, der Lust hat, mit mir eine deutschsprachige CSS-Seite (Tutorials, Einführung, Beispiele, Experimentelles) zu machen, oder über CSS-Dinge mal gemeinsam nachzudenken, der möge sich bitte melden - Danke! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout fails in Konqueror
Hello! Id like to make a 'flexible' design, which should - scale down well for small screen devices (handy, pda, s.o.). - display well on normal screen sizes (from 800x600 up to whatever). - not totally break, if user changes font-size (in Moz, FF and IE - don't know anything about other browsers, except Opera, which zooms the whole site). There for I decided to make a two-column layout (with the main-col first in source and the possibility to easily switch the side-col from left to right). The (basic) structure is: * page-wrapper * header * cols-wrapper (assigned the 'clearfix' method to not having the need for an extra clearing-div) * main-col (is floated to the left or right for being first in source) * side-col (is floated to the other side than the main-col) * footer The page-wrapper has a max-width. Widths for main- and side-col are set in percents, font-size in EMs. For the effect of equal-height columns I used the faux-column technique. Here you'll find a (working-)example of the page: http://top-topics.com/test-temp/index.html and the layout css-file: http://top-topics.com/test-temp/css-files/layout.css I've registered a trial account at browsercam.com! As you can see (http://www.browsercam.com/public.aspx?proj_id=190176) on picture 23 and 24 the layout totally breaks in Konqueror. I don't know much about this browser (and his bugs) so any hints are welcome, as well as any other suggestions for making the layout more 'robust'. Or what method would you choose to make it a three-column layout (with the flexibility to switch back to 2-cols simply by style)? Best regards Gunther PS: Wenn hier jemand aus dem deutschsprachigen Raum kommt, der Lust hat, mit mir eine deutschsprachige CSS-Seite (Tutorials, Einführung, Beispiele, Experimentelles) zu machen, oder über CSS-Dinge mal gemeinsam nachzudenken, der möge sich bitte melden - Danke! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] How to display data correct semantically
Hello listee's I have a semantics question for you. I have a message board that I am creating the prototype HTML pages for. http://24.m-corp.com/id20-discussion-bd.jpg The first page of the discussion board displays all the top level topics plus the name of the person that posted the topic, the number of posts and the date of the last post. http://24.m-corp.com/id21-discussion-bd.jpg When the user clicks on the topic he/she wishes to view a second page opens showing a list of the replies to the topic, each indented a little to show it is a reply to the one above. Now my question is this - at the top level without any of the replies visible the data is tabular. at the second level with the replies visible the data continues to be tabular but is also a list as well - - or is it? How should I mark it up so that it is correct? Tia Kristina __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout fails in Konqueror
Hello! Id like to make a 'flexible' design, which should - scale down well for small screen devices (handy, pda, s.o.). - display well on normal screen sizes (from 800x600 up to whatever). - not totally break, if user changes font-size (in Moz, FF and IE - don't know anything about other browsers, except Opera, which zooms the whole site). There for I decided to make a two-column layout (with the main-col first in source and the possibility to easily switch the side-col from left to right). The (basic) structure is: * page-wrapper * header * cols-wrapper (assigned the 'clearfix' method to not having the need for an extra clearing-div) * main-col (is floated to the left or right for being first in source) * side-col (is floated to the other side than the main-col) * footer The page-wrapper has a max-width. Widths for main- and side-col are set in percents, font-size in EMs. For the effect of equal-height columns I used the faux-column technique. Here you'll find a (working-)example of the page: http://top-topics.com/test-temp/index.html and the layout css-file: http://top-topics.com/test-temp/css-files/layout.css I've registered a trial account at browsercam.com! As you can see (http://www.browsercam.com/public.aspx?proj_id=190176) on picture 23 and 24 the layout totally breaks in Konqueror. I don't know much about this browser (and his bugs) so any hints are welcome, as well as any other suggestions for making the layout more 'robust'. Or what method would you choose to make it a three-column layout (with the flexibility to switch back to 2-cols simply by style)? Best regards Gunther PS: Wenn hier jemand aus dem deutschsprachigen Raum kommt, der Lust hat, mit mir eine deutschsprachige CSS-Seite (Tutorials, Einführung, Beispiele, Experimentelles) zu machen, oder über CSS-Dinge mal gemeinsam nachzudenken, der möge sich bitte melden - Danke! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Missing bottom of page in IE
This is a new one for me and I can't figure out why it's happening. In IE, the bottom of my page seems to be cutting off, so I don't see any of the bottom navigational elements. My HTML and CSS both validate, so I'm not sure what's wrong. http://wwwdev.lemoyne.edu/vpa/about_program.htm Here's the style sheet http://wwwdev.lemoyne.edu/css/vpa_about.css Thanks in advance for any suggestions or explanations. Michelle __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Variation on off-site links - need help
John Huetz wrote:
We're developing a site content management process which separates the
The designers want to be able to indicate within a list of links which link
may be new by displaying a NEW graphic after the link text.
What I'm trying figure out is how to make that happen within the style sheet
only, such that the programmers only have to add a class='new' to the a
tag inside the list item.
Stuart Homfray wrote:
John, I've just had a play with this, and unfortunately, due
circumstances beyond our control (ie IE!), the best that I could come up
with was to add an empty span class=new element:
HTML:
ul
lia href=#Class definition on a spanspan
class=new/span/a/li
lia href=#Class definition on a span that wraps inside the ul
blockspan class=new/span/a/li
/ul
CSS:
span.new {
background: url(http://www.johnhuetz.com/images/new.gif) no-repeat
100% 0.3em;
padding-right: 28px;
_display: inline-block; /* for IE6 */
}
I've tested in Firefox (1.0.6), Opera (8.02) and IE6 - haven't tested in
Mac browsers.
I agree with you - if someone knows of a better technique that removes
the need for unneccessary elements, I, too, am all ears!
If you are willing for IE to require DOM support, you might want to
consider a variant on Chris Heilmann's script[1] as mentioned by
Ingo[2]. The HTML would be as you wish:
a class=new href=blahNew link/a
Then use Chris's script that traverses the a tags, looking for links
with class == new. For each one, add a span tag as the last child
of the link, and use Stuart's CSS to style it. The selector would
change from span.new to .new span but that would be it.
That might help reduce the cruft that is actually in the code, at the
expense of a script for IE.
If you want to style Mozilla or Opera (and, MS willing, IE 7 as well)
without the script, use a modified version of Stuart's CSS that
defines content at the end of the link:
.new:after {
content: ;
background: url(http://www.johnhuetz.com/images/new.gif) no-repeat 5px 50%;
padding: 4px 14px; /* a total of 8px high, 28px wide */
line-height: 1px; /* the last 1px of the image height */
vertical-align: middle; /* vertically align it to the middle of
the adjoining text */
}
HTH,
Michael
[1] http://icant.co.uk/sandbox/inlinelinks/
[2] http://www.satzansatz.de/cssd/wrappinglinkbg.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] RE: Missing bottom of page in IE
Thanks - that's exactly what the problem was. I've got it working properly now! CJ Larson [EMAIL PROTECTED] 9/12/2005 11:19:55 AM Perhaps it's the IE unscrollable content bug? I see the entire content when I maximize IE on my 1600x1200 resolution. http://positioniseverything.net/explorer/unscrollable.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] suckerfish issue
Hi. should be a simple one for someone who knows what they're doing - http://www.boxivity.co.uk/test/main-template.html for some reason, the sub list disappears when the mouse hovers over the border between the list elements (which also appears to be rendering behind the main image over which the list is displayed in firefox!?) your guidance would be greatly appreciated. Tekin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] suggestions on how to accomplish layout
Hi all, I am trying to take a layout put together by a co-worker in dreamweaver with tables (http://www.rell.com/tst/index_table.html) and convert it into a pure css desgin (http://www.rell.com/tst/index.html). The problem that I am having is coming up with the correct idea/direction on how to get the right column in pure css. I have thought about absolute positioning, but that takes it out of the flow and how would I get it to span a page of different heights (I believe floating does the same thing)? In so many words...I don't have a clue on how to get the same effect??? Thank you for your time and consideration, Scot __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] suckerfish issue
-Original Message- From: Tekin Suleyman Subject: [css-d] suckerfish issue http://www.boxivity.co.uk/test/main-template.html for some reason, the sub list disappears when the mouse hovers over the border between the list elements (which also appears to be rendering behind the main image over which the list is displayed in firefox!?) It only seems to happen where the menu is over the image to the right of the menu. What is the overflow value of that image's container? I had a similar issue on one of my sites when it was set to overflow:auto; or none; - although moving the mouse over it at all triggered the disappearance, as opposed to it only happening in the gaps. This was down to a bug in Firefox, and it has apparently been fixed for version 1.5. HTH, -- Olly Hodgson Web Designer, Sesame This e-mail has been scanned for all viruses by Star. The service is powered by MessageLabs. For more information on a proactive anti-virus service working around the clock, around the globe, visit: http://www.star.net.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded Corner Help
Hi all,
I am using the Bullet-Proof Rounded Corners found here
http://www.albin.net/CSS/roundedCorners/ to make some divs with rounded
corners. It looks perfectly fine in FireFox OS X, but in IE 6 (Win2K), I get
vertical bars.
I'm using the CSS from the URL for that section, with these few
modifications:
/**
** Rounded Corners
***/
.roundedContent {
margin: 0px;
padding: 0px;
border: 1px solid #000;
color: #000;
background-color: #69F;
text-align: justify;
}
.roundedContentWrapper {
/* position this div however you want, but
keep its padding and border at zero */
padding: 0px;
border: 0px;
}
.roundedContent p
{
color: #000;
background-color: transparent;
}
And then here is the markup:
div class=roundedContentWrapper
div class=roundedContent
img class=borderTL src=/images/misc/borderTL.gif alt=nbsp;
width=14 height=14 /
img class=borderTR src=/images/misc/borderTR.gif alt=nbsp;
width=14 height=14 /
p
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut augue tellus,
eleifend pulvinar, molestie sed, bibendum vel, pede. Mauris non felis. In
sit amet dolor in nisl congue aliquam. Donec et quam non tortor mattis
tristique.
/p
p
Nulla rutrum velit quis magna adipiscing tempus. Duis nunc. Sed lectus nisi,
tempor, condimentum a, ornare vitae, orci. Mauris pharetra ligula nec leo.
Suspendisse potenti. Quisque lacinia consequat sem. Sed rutrum, tellus nec
blandit scelerisque, enim erat tempus ligula, vel ultrices eros nunc sed
massa.
/p
!-- IE5/win puts the margin-bottom of the content div's final element
OUTSIDE the containing box (div.content), instead of putting it inside
the containing box's edge. So it needs this spacer. --
div class=roundedCornerSpacernbsp;/div
/div!-- end of div.content --
div class=bottomCorners
img class=borderBL src=/images/misc/borderBL.gif alt=nbsp;
width=14 height=14 /
img class=borderBR src=/images/misc/borderBR.gif alt=nbsp;
width=14 height=14 /
/div
/div!-- end of div.contentWrapper --
Am I doing something wrong, or is there an easier/better solution you all
would recommend?
Thanks,
Ryan
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] New to CSS...Why isn't this horizontal?
Hi, all... I'm new to trying to do things with CSS...considering using CSS instead of tables and seeing what can be done. I'm trying to line up two DIV boxes horizontally. Instead, they are still vertical... What am I doing wrong? UL Style=display: inline-block; list-style-type: none LIDIV Style=top: 25px; left: 25px; height: 25px; width: 25px; margin: 5px; border: 1px solid black; /DIV/LI LIDIV Style=height: 25px; width: 25px; margin: 5px; border: 1px solid black; /DIV/LI /UL Thanks, Rick __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Synchronising independent 'columns'
-BEGIN PGP SIGNED MESSAGE- Hash: SHA1 Hi. My first post to this list, so I hope I'm within policy. :-) I have a page with a background that provides a visual sidebar that I need to honour using CSS. I need to be able to put elements into the sidebar and onto the main portion of the page, and occasionally vertically align elements in both. Another description, complete with some pictures, is at http://ken.coar.org/burrow/index.html?entry=1568 Is this possible? If so, can/will someone point me to something describing how to do it? Thanks! - -- #kenP-)} Ken Coar, Sanagendamgagwedweinini http://Ken.Coar.Org/ Author, developer, opinionist http://Apache-Server.Com/ Millennium hand and shrimp! -BEGIN PGP SIGNATURE- Version: GnuPG v1.2.4 (MingW32) Comment: Using GnuPG with Thunderbird - http://enigmail.mozdev.org iQCVAwUBQyWz+JrNPMCpn3XdAQI7UwP/XkK2fMrkk4lv3mrR2y0KN8UQMwlNHlMH S9uN71W4MYtlBF5iwCI3PS5Nr1fB4OJ3pB9mcU1oXhKlV2OgLRhjwnK4vNDrjzEs t4awv7/hiLGwRA+lELi2p0LE3IokizswtZcRR5QEGYHOGkrSgXWySNwNs3CbAN3r 7w7OLouHtCc= =L0p+ -END PGP SIGNATURE- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Win IE5/5_5 Help
Hello all, I have been going around and around with this and decided it was time to call in the experts... I am having a width/border/lining-up issue in IE 5 Win and IE 5.5 Win on this page (and others most likely): http://66.155.251.18/joinmvp.com/members/ look at the left and right top red edges to see my issue. I have been using browsercam (Win 2000 ie5/ie5.5) for testing, but can't get it. FWIW, I don't see it with my multiple installs of IE on my PC... Anyone see the trouble and have a solution? TIA (very much!) -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New to CSS...Why isn't this horizontal?
You have nothing set on the li elements to tell them to stack horizontally. You set display: inline-block on the ul, but the items inside the ul will stack as normal, which is vertically. Setting the display property on the ul will force it to sit horizontally with other block-level elements which are SIBLINGS (e.g. another ul after this one), but it won't cause the children (the lis) to display horizontally. Instead, take the display off of the ul and set it (or float:left) on the li elements. Then they will line up horizontally. On 9/12/05, Rick Faircloth [EMAIL PROTECTED] wrote: Hi, all... I'm new to trying to do things with CSS...considering using CSS instead of tables and seeing what can be done. I'm trying to line up two DIV boxes horizontally. Instead, they are still vertical... What am I doing wrong? UL Style=display: inline-block; list-style-type: none LIDIV Style=top: 25px; left: 25px; height: 25px; width: 25px; margin: 5px; border: 1px solid black; /DIV/LI LIDIV Style=height: 25px; width: 25px; margin: 5px; border: 1px solid black; /DIV/LI /UL Thanks, Rick __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Is it possible to create this type of a layout with CSS?
Hi all
I ran into an interesting problem that I don't have an answer to (I went
through lots of CSS tutorials but still don't know how to do this).
I have a header div and inside of it, I'd like to place 3 boxes (div's).
One on the left (logo) and two on the right (search + navbar). It looks
something like this (this is just a mockup... I'd like to create the layout
before I start with graphics):
http://img366.imageshack.us/my.php?image=layout8vc.gif
I tried implementing this and it always blows up in either IE or Firefox.
Is there an easy way to do this? I somehow have to squeeze 3 divs into one
div and 1 has to be on the left and two on the right (one under each other).
No brainer would be to split it horizontally in half but then my logo will
be messed up (it has to be clickable).
Here's some CSS that I have:
/* container encloses everything */
#container {
width: 818px;
\width: 838px;
w\idth: 818px;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 0px;
background: white;
}
#header {
padding: 0px;
margin-bottom: 0px;
height: 132px;
background: white;
}
/* logo, search and nav are inside the header */
#logo {
float: left;
padding-left: 25px;
width: 200px;
}
#search {
/* position: relative; */
top: 0px;
left: 0px;
width: 160px;
float: right;
margin-right: 15px;
margin-top: 55px;
}
ul#nav {
position: relative;
top: 42px;
left: 352px;
width: 237px;
margin: 0;
height: 15px;
list-style-type: none;
overflow: hidden;
}
What says you, CSS deities? How do I do this properly? :)
Thanks in advance!!!
Melissa Brands
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New to CSS...Why isn't this horizontal?
Monday, September 12, 2005, 12:58:29 PM, Rick Faircloth wrote: I'm trying to line up two DIV boxes horizontally. Instead, Sounds like you basically want a 2-column layout, minus the header/footer. You don't say what content will go in these boxes, so I'm assuming they should expand as necessary. This means float-based will be the way to go. You could take something like this and adapt it: http://css.maxdesign.com.au/floatutorial/tutorial0816.htm remove the #top and #footer divs... Could you give us an example of what you'd like to see? Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Is it possible to create this type of a layout with C SS?
Hi all I ran into an interesting problem that I don't have an answer to (I went through lots of CSS tutorials but still don't know how to do this). I have a header div and inside of it, I'd like to place 3 boxes (div's). One on the left (logo) and two on the right (search + navbar). SNIP Melissa Brands Melissa- I don't have time to provide a specific example or code, but what you want to do in general is to dump that absolute positioning for the two right items. Instead, wrap them both inside of a right floated div. HTH Ron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] New to CSS...Why isn't this horizontal?
Hi, Eric... That worked...I had to using float: left (IE 6)...display: inline-block didn't work...guess that works for other browsers? Thanks for the help! Rick -Original Message- From: Eric Shepherd [mailto:[EMAIL PROTECTED] Sent: Monday, September 12, 2005 1:10 PM To: [EMAIL PROTECTED] Cc: css-discuss Subject: Re: [css-d] New to CSS...Why isn't this horizontal? You have nothing set on the li elements to tell them to stack horizontally. You set display: inline-block on the ul, but the items inside the ul will stack as normal, which is vertically. Setting the display property on the ul will force it to sit horizontally with other block-level elements which are SIBLINGS (e.g. another ul after this one), but it won't cause the children (the lis) to display horizontally. Instead, take the display off of the ul and set it (or float:left) on the li elements. Then they will line up horizontally. On 9/12/05, Rick Faircloth [EMAIL PROTECTED] wrote: Hi, all... I'm new to trying to do things with CSS...considering using CSS instead of tables and seeing what can be done. I'm trying to line up two DIV boxes horizontally. Instead, they are still vertical... What am I doing wrong? UL Style=display: inline-block; list-style-type: none LIDIV Style=top: 25px; left: 25px; height: 25px; width: 25px; margin: 5px; border: 1px solid black; /DIV/LI LIDIV Style=height: 25px; width: 25px; margin: 5px; border: 1px solid black; /DIV/LI /UL Thanks, Rick __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is it possible to create this type of a layout with CSS?
Melissa Brands wrote:
What says you, CSS deities? How do I do this properly? :)
Thanks in advance!!!
Melissa Brands
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Hi Melissa,
This is a quick run tested in FF IE6 win sp2.
Works ok change sizes etc to suit.
style type=text/css
!--
#header {
background-color: #CC;
margin: 0px;
padding: 0px;
}
#left {
float: left;
width: 250px;
height: 100px;
background-color: #0099FF;
margin: 0px;
padding: 0px;
}
#rightupper {
float: right;
width: 250px;
background-color: #00FFCC;
height: 50px;
margin: 0px;
padding: 0px;
}
#rightlower {
clear: right;
float: right;
width: 250px;
height: 50px;
background-color: #99FF66;
margin: 0px;
padding: 0px;
}
.clearing {
clear: both;
}
--
/style
/head
body
div id=header
div id=leftLogo here/div
div id=rightupperUpper content here/div
div id=rightlowerLower content here/div
div class=clearingnbsp;/div
/div
/body
Regards,
Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re[2]: [css-d] New to CSS...Why isn't this horizontal?
Monday, September 12, 2005, 2:17:47 PM, Rick Faircloth wrote: I guess, by your comments, that DIV's need to have a float characteristic to be expandable according to content? Float-based layouts are typically more flexible than absolute positioning at least. Floated elements remain in the normal flow so they can affect and be affected by content around them (good for accessibility, a bit harder to design for). Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Is it possible to create this type of a layout with CSS?
I have a couple very similar questions. Currently, is there another method to style the following two header layouts without needing an additional clearing div? (Top line is the width of entire page) In my case, I can't specify a height for the logo, because the companies we deal with will want to put their own logo on the pages, and I can't code that height into the CSS. I've had an especially hard time with the second style. [Style 1] (Logo on left, text right aligned) +--+ login/out | LOGO |name +--+ [Style 2] (Logo centered between page margins, text right aligned, without the right text moving the image to the left) +--+ login/out | LOGO |name +--+ -Original Message- Hi Melissa, This is a quick run tested in FF IE6 win sp2. Works ok change sizes etc to suit. snip __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout fails in Konqueror
Gunther Pilz wrote: Here you'll find a (working-)example of the page: http://top-topics.com/test-temp/index.html and the layout css-file: http://top-topics.com/test-temp/css-files/layout.css I don't know much about this browser (and his bugs) so any hints are welcome, as well as any other suggestions for making the layout more 'robust'. I confirm it's broken in Konq 3.3.2 (which is about 8 months old). Konq is KHTML, same as Safari. Current Konq development version is 3.5, due for release shortly. http://www.konqueror.org/ It's broken exactly the same in Epiphany, which is Gecko. -- Cast your cares on the Lord and He will sustain you. Psalm 55:22 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://members.ij.net/mrmazda/auth/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Synchronising independent 'columns'
Ken, Here is a demo I cooked up that is one possible approach to your design. http://www.jimdavis.org/test/test1.htm This design uses an image in the body for the left column (not an original idea, btw). Works in FF and IE PC. Will need to have an exception to correct the IE 5 box model (see http://www.projectseven.com/csslab/boxmodel/ ) hth, Jim On 9/12/05, Rodent of Unusual Size [EMAIL PROTECTED] wrote: I have a page with a background that provides a visual sidebar that I need to honour using CSS. I need to be able to put elements into the sidebar and onto the main portion of the page, and occasionally vertically align elements in both. Another description, complete with some pictures, is at http://ken.coar.org/burrow/index.html?entry=1568 Is this possible? If so, can/will someone point me to something describing how to do it? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Win IE5/5_5 Help
On Mon, 12 Sep 2005 13:11:42 -0400, Tom Livingston [EMAIL PROTECTED] wrote: Anyone see the trouble and have a solution? Well, you won't see it now cause I finally got it. If you can take a peek and confirm my BrowserCam results I'd appreciate it. Thanks to you if you looked already... -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] suggestions on how to accomplish layout
Scot Schlinger wrote: I am trying to take a layout put together by a co-worker in dreamweaver with tables (http://www.rell.com/tst/index_table.html) and convert it into a pure css desgin (http://www.rell.com/tst/index.html). The problem that I am having is coming up with the correct idea/direction on how to get the right column in pure css. Generally: Don't use AP for large areas if content-size is unknown or variable. Suggestion: A 'float: right;' with negative top and bottom-margin, and positive right-margin, will solve your problem just fine. Mark it up first in the middle-section, give it a width, and set no height so it will self-adjust to whatever you put inside it. Floats do take up space, so you just have to 'clear' the footer and/or whatever that should stay below it. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout look-alike - both our development websites
I am trying to create a layout based on a Flash layout of the same information. Basically it is a form that has 4 graphical elements placed in various locations of the website. Here is a look at the website I am trying to copy: http://www.moanet.ws/resolve2/contact.html The reason I'm trying to change it is because I don't know enough Flash to submit a form, I'd rather do it in XHTML/ASP. One of the problems I'm having is the top banner and left-side banners, and the form. How should I place them, I used float: right, then float:left for some elements, but doesn't work right in IE or Firefox. Then I tried to absolutely position the form, but it didn't work either. It seems like a simple thing to do but could you help lead me to the right direction. Here is the one I'm working on to make it look like the above: http://www.jardsenterprises.com/lifecycle/contactform.asp __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Getting rid of gap in header
I am not sure what happened to my page, however, I am trying to fix it. I am using the default style switcher,. IE6 is displaying the alignment I am trying to acheivee, however, Firefox 1.06is not. First of all, I am trying to eliminate the space between InfoForce Services and Knowledge is power. Help Please? HTML: http://infoforce-services.com/ifs_header.php CSS: http://infoforce-services.com/css/ifsmain.css Angus MacKinnon MacKinnon Crest Saying Latin - Audentes Fortuna Juvat English - Fortune Assists The Daring Web page://www.infoforce-services.com Choroideremia Research Foundation Inc. 2nd Vice president http://www.choroideremia.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] extra veritcal space between divs in IE
Well, I can't seem to figure out where this is coming from. Here is the url:
http://kellyhide.offlead.com/dogs/AllegriaofFirstAvenue.html
I have a div containing an image, floated right. Next I have a div
containing navigation, also floated right. I nested the div.nav inside of
div.sectionnav so that I could apply padding around it instead of margin, so
that it wouldn't have too much extra space on the side in IE. That's all
good. But in IE I am getting what looks to be about 50px of space between
the two floated divs. The css has 10px padding on the bottom of div.pic and
20px on the top of div.sectionnav. There is 0 padding or margin on div.nav.
I removed all whitespace between the elements, but that didn't help.
Here's the css for these divs:
div.pic {
margin: 0;
padding: 20px 10px 10px 10px;
}
#content div.sectionnav {
width: 180px;
clear: both;
float: right;
padding: 20px 10px 10px 10px;
margin: 0;
}
#content div.sectionnav div.nav {
width: 180px;
background-color: #aaa091;
margin: 0;
padding: 0;
}
Full CSS here: http://kellyhide.offlead.com/includes/style_main.css
Thanks!
Jeniffer
Jeniffer C. Johnson
OffLead Productions
http://www.offlead.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout look-alike - both our development websites
I would suggest a look at the link below as you are sure to find a CSS base layout that will fix your problem. The main thing you need to do to fix your current layout is to insert a div clear=all after your floats. Jamie On Sep 12, 2005, at 4:02 PM, Shawn Ferguson wrote: I am trying to create a layout based on a Flash layout of the same information. Basically it is a form that has 4 graphical elements placed in various locations of the website. Here is a look at the website I am trying to copy: http://www.moanet.ws/resolve2/contact.html The reason I'm trying to change it is because I don't know enough Flash to submit a form, I'd rather do it in XHTML/ASP. One of the problems I'm having is the top banner and left-side banners, and the form. How should I place them, I used float: right, then float:left for some elements, but doesn't work right in IE or Firefox. Then I tried to absolutely position the form, but it didn't work either. It seems like a simple thing to do but could you help lead me to the right direction. Here is the one I'm working on to make it look like the above: http://www.jardsenterprises.com/lifecycle/contactform.asp __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout look-alike - both our development websites
Sorry ... forgot the link. http://glish.com/css/ Jamie On Sep 12, 2005, at 4:02 PM, Shawn Ferguson wrote: I am trying to create a layout based on a Flash layout of the same information. Basically it is a form that has 4 graphical elements placed in various locations of the website. Here is a look at the website I am trying to copy: http://www.moanet.ws/resolve2/contact.html The reason I'm trying to change it is because I don't know enough Flash to submit a form, I'd rather do it in XHTML/ASP. One of the problems I'm having is the top banner and left-side banners, and the form. How should I place them, I used float: right, then float:left for some elements, but doesn't work right in IE or Firefox. Then I tried to absolutely position the form, but it didn't work either. It seems like a simple thing to do but could you help lead me to the right direction. Here is the one I'm working on to make it look like the above: http://www.jardsenterprises.com/lifecycle/contactform.asp __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ADMIN: additions to the Policies page
Hi everyone, Just a note that I added three things to the Policies page (http://www.css-discuss.org/policies.html). In case you want to spare yourself a click, here's a summarized version of what I added: * No matter how potentially embarrassing they may be, posted messages are never, ever deleted from the list archives. * If you suddenly stop receiving list mail, do not post a test message. * If it's taking a long time for your post to show up, wait. There's more detail on the Policies page, but that's the essence of each one. The first of the three is an unwritten but long-standing policy. The second two are, I suppose, new, but only in the sense that it's become necessary to write them down. I may also add one about the reply-to policy as well, in case anyone's thinking of suggesting it, but the question comes up fairly rarely. The added three, sadly, are not so rare. If you're an old hand with the Policies page, the new three are near the bottom of the list. If you were previously unaware of the Policies page, then hie thee hence and read it. Thank you. -- Eric A. Meyer ([EMAIL PROTECTED]) Principal, Complex Spiral Consulting http://complexspiral.com/ CSS: The Definitive Guide, CSS2.0 Programmer's Reference, Eric Meyer on CSS, and morehttp://meyerweb.com/eric/books/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[Fwd: Re: [css-d] suckerfish issue]
Tekin Suleyman wrote:
Hi. should be a simple one for someone who knows what they're doing -
http://www.boxivity.co.uk/test/main-template.html
for some reason, the sub list disappears when the mouse hovers over the
border between the list elements (which also appears to be rendering
behind the main image over which the list is displayed in firefox!?)
I had some problems with this the other day. This happens because the
margins between the list items, which did not track the mouse when
hovered at it. The quick solution is to have the border on the
ul#mainnav li a instead on the ul#mainnav li. This would make the border
part of the a which can detect mouseovers.
ul#mainnav li a {
display: block;
margin: 0;
padding: 4px;
padding-top:5px;
padding-left:30px;
background: #9FCC29 url(/images/menu-star.gif) no-repeat left top;
font: bold 11px tahoma, sans-serif, arial;/* If you get an
unwanted gap after your a block (IE-Win) try increasing the line
height*/
color: #071B64;
text-decoration: none;
width: 131px;/* Causes Problems in IE5-Mac and
Netscape/Mozzilla - see next fix*/
border-bottom: 2px solid #fff; /* Change is here */
}
Hope this helps
Ray
*BaliCamp*
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] MSIE li menu problem
Ask Bjørn Hansen wrote: Hi everyone, I made a simple menu with a olli .../lili.../li[]/ol structure. It's at http://www.pool.ntp.org/ (css at http://www.pool.ntp.org/css/ ntppool.css) It works great in Safari and Firefox: http://tmp.askask.com/2005/09/pool-safari.png But in MSIE each li is the width of the window and stacked below each other: http://tmp.askask.com/2005/09/pool-msie.png Help! :) - ask ps. thanks everyone for this list. I've been participating on far too many lists and online forums since the early nineties and this one really stands out as being exceptionally friendly and useful. You are all great (and beautiful, I'm sure). :-) CMIIW The main problem is that you are using inline-block for the menu which has some problems on some browsers. Try using display: inline instead hope it helps Ray *BaliCamp* __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is it possible to create this type of a layout with CSS?
CJ Larson wrote: [Style 1] (Logo on left, text right aligned) +--+ login/out | LOGO |name +--+ Images are inline and will force the height for the div. The alternate is to set a minimum height but this is not supported by all browsers. Some method of clearing the containing div is required if you are containing floated elements. This is still significantly less code than you would use with tables. [Style 2] (Logo centered between page margins, text right aligned, without the right text moving the image to the left) +--+ login/out | LOGO |name +--+ In the above case the items on the right may need to be taken out of the flow and positioned absolutely.I would contain both elements in a single div. The logo can then be given left and right margins as auto and will center. If the page is not intended to be fluid then playing with margins will archive the desired effect without resulting to absolute positioning which IMHO is not the greatest. I am sure some of the masters of CSS on this list have more elegant solutions. Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
