[css-d] Can't figure out this positioning...
The example is here: http://tinyurl.com/3a4h6c
I have some simple divs - I just want the wrapper div to float
centered horizontally in the browser window with some background color
and either side and the top and bottom. I was looking for 20px for the
top background and the same at the bottom. I just don't seem to get this
positioning. Why can't I get this to float centered with some background
color above and below and centered horizontally?
The html is roughly:
body
div id=wrapper
div id=top_mast
div id=logo
img src=logo.jpg alt=PRA
/div
div id=logo_name
img src=logo_name.jpg alt=PRA
/div
/div
div id=maincontent
div id=group_shot
img src=group.jpg alt=Friendly Staff
/div
div id=footer
img src=canvas_group_r2_c2.jpg
/div
/div
/div
/body
The CSS I am trying to use is:
body {
background-color: #67;
margin: 0; padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: Black;
position: relative;
}
#wrapper { position: relative; top: 20px; width: 760px;
margin: auto; margin-bottom: 100px;}
#top_mast { background-color: #80;
background-image:
url(../../../Assets/images/page_pics/maroon/Take2/topmast_bg.jpg);
background-repeat: repeat-x;
width: 760px; height: 144px;
margin: auto;
position: absolute;
}
#logo_name { position: absolute; left: 120px; top: 91px; z-index: 2000;}
#logo { position: absolute; left: 10px; top: 8px; z-index: 1000;}
#maincontent { position: absolute; top: 144px;
width: 760px; margin: auto;
background-color: #FFF;
}
#group_shot { border: 1px solid green; }
#footer {color: #FFF; font-size: small; height: 144px;
background:
url(../../../Assets/images/page_pics/maroon/Take2/foot_bg.jpg) repeat-x;
}
__
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] Fixex/fluid column issues
Hello Daniel,
On 4/3/07, Daniel Hammond [EMAIL PROTECTED] wrote:
I have a page where the left column is the navigation with a fixed width
in
pixels, and the content to the right of it is fluid in its width. I tried
following these guidelines:
http://blog.html.it/layoutgala/LayoutGala31.html.
Here is my URL: http://www.objectivedesigns.com/other/mcc/default1.htm.
And the CSS:
http://www.objectivedesigns.com/other/mcc/css/2col_leftNav1.css.
The problem I'm having is that the content protrudes out to the right what
seems to be the same amount of space that the navigation is taking up on
the
left. I simply want the content to extend to the right side of the browser
window instead of out of the bounds of the window.
In your CSS you have:
div#content{
width: 100%;
background: #ddd;
margin-left: 200px;
}
removing width:100%;
will resolve your problem.
width + margin = total container size,
in this case it causes the content to extend 200 pixels past the right side
of the browser window.
Daniel Hammond
2227 Dunseath Ave.
Atlanta, GA 30318
770-842-8817
www.objectivedesigns.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE overflow problems with horizontal scrolling gallery
charles wrote: ... http://www.spiritone.com/~charlesd/cecilia2/index.html ... IE 6 is painting the horizontal scrollbar in the correct place, but when used, the content within the scrolling area doesn't move (the marker moves, but the content does not). IE 7 does the same thing, but adds the extra feature of an additional scrollbar at the bottom of the page, ignoring any overflow:hidden set in the page. I've spent far too much time tossing hasLayout triggers around, applying position:relative, and removing position:relative, all to no avail. That's an interesting position:fixed simulation for IE ... position:relative in #scrollholder should make IE listen to reason. Don't ask me which of the descendants really need their position:relative, and in what combination. 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/
Re: [css-d] Can't figure out this positioning...
Hi Robert The example is here: http://tinyurl.com/3a4h6c I have some simple divs - I just want the wrapper div to float centered horizontally in the browser window with some background color nd either side and the top and bottom. I was looking for 20px for the top background and the same at the bottom. I just don't seem to get this positioning. Why can't I get this to float centered with some background color above and below and centered horizontally? Here are two links to articles that may help with a css solution. http://bluerobot.com/web/css/center2.html http://www.hicksdesign.co.uk/journal/how-to-vertical-centering-with-css I think I've also read about a js solution; someone else would have to help with that. :-) HTH, Bill __ 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] Form and fieldset problems
Hi All The site is at: http://theriveryouth.info/ http://theriveryouth.info/wp-content/themes/riveryouth/style.css In the navcontainer the Go bit should be alongside the search box but I can't get it to go there. Any ideas please? 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] Form and fieldset problems
The site is at:
http://theriveryouth.info/
http://theriveryouth.info/wp-content/themes/riveryouth/style.css
In the navcontainer the Go bit should be alongside the search box but
I can't get it to go there.
Because you are floating the form, if you float the fieldset and inputs
inside it, it should work (it does using FF web dev extension):
#navcontainer fieldset, #navcontainer input{
float:right;
}
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/
Re: [css-d] Form and fieldset problems
Hi James
On 04/04/07, James Leslie [EMAIL PROTECTED] wrote:
The site is at:
http://theriveryouth.info/
http://theriveryouth.info/wp-content/themes/riveryouth/style.css
In the navcontainer the Go bit should be alongside the search box but
I can't get it to go there.
Because you are floating the form, if you float the fieldset and inputs
inside it, it should work (it does using FF web dev extension):
#navcontainer fieldset, #navcontainer input{
float:right;
}
Hope that helps
Perfect thanks - it helped a lot.
--
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] print problem
Is your text contained in a float? There's an article on Alistapart which discusses this problem. http://alistapart.com/articles/goingtoprint/ Hope that solves it. Emma Message: 5 Date: Tue, 03 Apr 2007 23:54:08 +0200 From: Josine Krant [EMAIL PROTECTED] Subject: [css-d] print problem To: css-d@lists.css-discuss.org Message-ID: [EMAIL PROTECTED] Content-Type: text/plain; charset=Windows-1252 Hi all, I have a problem with printing this long page. It stops after the first page is printed. In the print.css the relevant divs and classes are set to overflow: visible. What do I forget? Problem is in IE and FF. http://www.helmawiersma.nl/nieuw2/nieuws.html http://www.helmawiersma.nl/nieuw2/helma.css http://www.helmawiersma.nl/nieuw2/helmaprint.css Thanks in advance, J. Krant www.arobase.nl __ 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] floated img not right in IE
Hi,
I finally got a page to look the way I wanted in Firefox. Then opened
it in IE Win and the floated images are all over the place.
Here's the link:
http://www.lauragattonihandwovens.com/csstest/scarves.html
Also, if you can help, notice that my 3px double borders around the
photos are missing in IE. I know I've got a border=0 and that is
because every img was showing up with a 1px purple border (I don't
know why). Also why is my copyright at the bottom not formatting?
(compare http://www.lauragattonihandwovens.com/csstest/logo.html).
Here's the css:
body {
margin: 20px 40px 0 40px;
padding: 0;
background-color: white;
color: black;
background-image: url(wpscarf8copy.jpg);
background-repeat: repeat-y;
position: absolute;
font-family: small Arial, Helvetica, sans-serif;
}
#bodybackground {
background-color: white;
color: black
}
#banner {
margin: 0;
padding: 0;
}
#navlinks {
font-weight: bold;
font-size: .9em;
margin: 0;
padding: 3px 0 3px 275px;
text-decoration: none;
background-color: #A2A2D8;
height: 1%;
}
#navlinks ul {
margin: 0;
padding: 0;
}
#navlinks li {
display: inline;
padding: 3px;
}
#navlinks a:hover {
color: white;
font-style: italic;
}
#main {
color: black;
text-align: left;
margin: 0;
padding: 20px;
}
#thumbnail {
margin: 40px 25px 0 0;
padding: 35px;
border: double white 3px;
background-color: black;
float: left;
}
p.spacing {
margin-top: 45px;
height: 1%;
}
#copyright {
text-align: left;
font-size: .8em;
font-style: italic;
}
Let me know if you need more info. Thanks again!
--Laura
__
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] print problem
Thanks, Replaced the floats by a position: relative. This solved the problem in IE7, but not in Firefox. Any more ideas? Josine - Original Message - From: [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Wednesday, April 04, 2007 12:52 PM Subject: Re: [css-d] print problem | Is your text contained in a float? There's an article on Alistapart which | discusses this problem. | | http://alistapart.com/articles/goingtoprint/ | | Hope that solves it. | | Emma | | | Message: 5 | Date: Tue, 03 Apr 2007 23:54:08 +0200 | From: Josine Krant [EMAIL PROTECTED] | Subject: [css-d] print problem | To: css-d@lists.css-discuss.org | Message-ID: [EMAIL PROTECTED] | Content-Type: text/plain; charset=Windows-1252 | | Hi all, | I have a problem with printing this long page. It stops after the first page | is printed. | In the print.css the relevant divs and classes are set to overflow: visible. | What do I forget? Problem is in IE and FF. | | http://www.helmawiersma.nl/nieuw2/nieuws.html | http://www.helmawiersma.nl/nieuw2/helma.css | http://www.helmawiersma.nl/nieuw2/helmaprint.css | | Thanks in advance, | J. Krant | | www.arobase.nl | | | __ | css-discuss [EMAIL PROTECTED] | http://www.css-discuss.org/mailman/listinfo/css-d | IE7 information -- http://css-discuss.incutio.com/?page=IE7 | List wiki/FAQ -- http://css-discuss.incutio.com/ | Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ | __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floated img not right in IE
Laura Gattoni wrote:
I finally got a page to look the way I wanted in Firefox. Then opened
it in IE Win and the floated images are all over the place.
http://www.lauragattonihandwovens.com/csstest/scarves.html
Try adding...
#thumbnail {clear: left;}
Also, if you can help, notice that my 3px double borders around the
photos are missing in IE.
The borders are there, but double white borders are almost invisible
against white background in IE.
I know I've got a border=0 and that is because every img was showing
up with a 1px purple border (I don't know why).
That's normal link-decoration for images in most browsers.
Also why is my copyright at the bottom not formatting? (compare
http://www.lauragattonihandwovens.com/csstest/logo.html).
Might have something to do with the bad state of the source-code...
http://validator.w3.org/check?uri=http://www.lauragattonihandwovens.com/csstest/scarves.html
Browsers can't recover from every thinkable tag-soup meal, you know, and
you have some of the most non-standard element-nesting (in addition to
other flaws) I've seen in a long time.
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] Site check for formever.org (PNG Info for anyone interested)
Hi Dave, Started working on this before I saw your Completed message. I used a few of your images to show how to display PNG files in IE 5-6. A filter needs to be loaded in the IE browser to allow the transparency to work. I created a page with an example and some links to further info. http://www.joeschmittjr.com/css-d/07-03-29_SiteCheckForFormever.org/HomePage-reduced.htm Hope someone finds it useful. Joe - Original Message - From: Dave M G [EMAIL PROTECTED] To: CSS Discuss css-d@lists.css-discuss.org Sent: Thursday, March 29, 2007 4:23 AM Subject: [css-d] Site check for formever.org CSS-d, If any of you out there would be kind enough to tell me if you see any errors on your browser/platform, that would be really awesome. I've checked that my design validates. The design I'd like to test is here: http://formever.org/css_test I'm using FireFox on Ubuntu(Linux), and that's all I personally have for testing (well, I suppose I could check in Konqueror, but I'm more interested in Mac and Windows issues). Here's what it looks like for me: http://formever.org/firefox_linux.png To get corners and borders around the main content area, I'm using the Javascript solution from here: http://www.456bereastreet.com/archive/200609/transparent_custom_corners_and_borders_version_2/ This does use PNGs with transparency, which I could probably avoid. But, since the new IE is supposed to properly support PNG, and phase out the old versions, hopefully the time is ripe to start going in the direction of taking full advantage of PNGs. The design should be reasonably fluid. It breaks if you shrink the window horizontally to below somewhere around 300 to 400 pixels. And will break if you scale to somewhere above 2000 pixels wide. I'm trying to leave it open for most text to be resized up or down without too much destruction, but right now the two tabs above the main content area move out of place if the text size deviates from 1em (on my machine, anyway). Suggestions for how to cope with that are welcome. Thank you for any help, and I hope to hear from you. -- Dave M G Ubuntu 6.10 Edgy Eft Kernel 2.6.20-5-generic Pentium D Dual Core Processor PHP 5, MySQL 5, Apache 2 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 Window Resize
Thanks, ~dL. Not sure what the errors were. Perhaps I was working on the file at the time you checked it. I ran Tidy as you suggested and got 22 warnings and 0 errors. I addressed all of the warnings. The div still does not move with the page in IE7 when I resize the browser window. As you can see, I attempted to use conditional comments and use the min-width property to trigger Layout. All of the websites I visited made it seem so straightforward that I just feel like I have a typo somewhere. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of ~davidLaakso Sent: Monday, April 02, 2007 11:56 AM To: Mark Gutberlet Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] IE7 Window Resize Mark Gutberlet wrote: I am sure I am overlooking something simple...[trimmed] The page is currently live at: http://www.rhcbuilds.com/home.php The first place to begin with html/css problem solving is to provide valid files to the list. Your css is valid. And that is all good. The html file has more than 100 errors. The problem you wrote about probably has to do with accounting for ap in IE. But, first back-up what you've got. Run the source document through Tidy http://infohound.net/tidy/ . Tidy will point out the errors, and correct many of them. Correct the balance by hand. Bring valid files back to the list for the remaining and unresolved issues you encounter. (You'll need to account for user discretion with regard to font-scaling as well. Even a hint of scaling will wreck your page now). 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/ __ 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] Pipe List
Morning David You Wrote Don - HtmlFixIt.com wrote: snipped a bit try it again if you would ... think I have it in ie6, 7 and ff http://htmlfixit.com/tutes/css/pipe_delimited_faux.html Forgot ie6 won't respect the first child ... but I think this might do it ... Nice job, Don. You are good to go in IE6 and IE7. I am seeking a pipe menu, or a border menu that does /not/ require images and works in all versions of IE including mac/IE5.2. If I have a choice I would prefer /not/ to hack IE7.0. For example, something like this http://www.nytimes.com/pages/todayspaper/index.html (the file folder tab is not a requirement, although it is charming :-) ). It is the look and feel I am after. Anyone? Regards, ~dL In the referenced NY Times link above, they are physically inserting a pipe (as I'm sure you noted) between each end /a and the start of each new a in the html. If you want that effect in IE 7 using Fat Erik's code, you need to switch to Quirks mode. A simple test page [1] using an incomplete Doctype shows what I mean. This will, I'm sure, create other problems to overcome in a production page / site. IE 7.0.5xx shows the pipes on my Win XP Pro SP2 Box. hth [1] http://www.nannery.net/atest.html Jim Nannery www.redfernenterprises.com PScan't tell if this works on mac IE 5.2 can't test that OS / browser combo locally. and IIRC, mac IE isn't affected by Doctype switching Jim __ 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] Wrapping data in table cells without whitespace
On Wed, 4 Apr 2007 01:46:33 + (UTC), John Wells wrote: Guys, Is there a way to wrap data in table cells, even though there is no whitespace in that data to break? [...] On Tue, 3 Apr 2007, David Hucklesby replied: Hi John, I don't know if this works in table cells, as I have little experience with tables. But if this is only happening in IE, I suggest trying the IE special declaration: word-wrap:break-word; On Wed, 4 Apr 2007 07:45:05 +0300 (EEST), Jukka K. Korpela helpfully added: I don't think the problem is IE-specific, since other browsers are a little _less_ inclined into breaking strings with no whitespace. [...] Besides, breaking at an arbitrary character isn't suitable for URLs in general. There are specific recommendations (e.g., in the Chicago Manual of Style) where a URL should be broken when needed. The practical way to do so is to add wbr tags at the allowable break points; of course, this is a non-CSS and nonstandard approach, but it's the only one that really works. More info on this: http://www.cs.tut.fi/~jkorpela/html/nobr.html#suggest ~~~ Thank you for this useful information, Jukka. I was thinking of situations where a long text string simply extends beyond the confines of its container. It's only IE that pushes the container wider. But now I come to think of it, a table cell will likely expand in non-IE browsers as well. So glad you corrected me on this. Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pipe List
Jim Nannery wrote: I am seeking a pipe menu, or a border menu that does /not/ require images and works in all versions of IE including mac/IE5.2. If I have a choice I would prefer /not/ to hack IE7.0. For example, something like this http://www.nytimes.com/pages/todayspaper/index.html (the file folder tab is not a requirement, although it is charming :-) ). It is the look and feel I am after. Anyone? Regards, ~dL In the referenced NY Times link above, they are physically inserting a pipe (as I'm sure you noted) between each end /a and the start of each new a in the html. If you want that effect in IE 7 using Fat Erik's code, you need to switch to Quirks mode. A simple test page [1] using an incomplete Doctype shows what I mean. This will, I'm sure, create other problems to overcome in a production page / site. IE 7.0.5xx shows the pipes on my Win XP Pro SP2 Box. hth [1] http://www.nannery.net/atest.html Jim Nannery While the page in quirks for IE7.0 does bring up poor Fat Erik's http://css.maxdesign.com.au/listamatic/horizontal32.htm pipes, it does not a pretty picture make in my book. I think I'll pass on this option. Nevertheless, /thank you/ for your time in checking this out, Jim. 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] Pipe List
~davidLaakso wrote: Jim Nannery wrote: I am seeking a pipe menu, or a border menu that does /not/ require images and works in all versions of IE including mac/IE5.2. If I have a choice I would prefer /not/ to hack IE7.0. For example, something like this http://www.nytimes.com/pages/todayspaper/index.html (the file folder tab is not a requirement, although it is charming :-) ). It is the look and feel I am after. Anyone? Regards, Okay David, Version 2 of my faux pipe delimited unordered list menu [1] has one less hack in it (no ie6 hack) and appears to work fine in win ie6, ie7 and ff. I don't do mac often :-) The trade off? Well I class the first li and create a border-left: 0 rule for that classed li. Better? Worse? The beauty of the tabs in the NYT example is obviously that it works for all tabs because they have both left and right dividers. They also special class the active tab. They do not use pipes on the tabbed menu that I think you referred to. They did down lower in the jump to, that confused me at first as well until I grasped what you were referring to. I await colorful screen shots on the Mac 5.x platform :-) Don [1] Version 2: http://htmlfixit.com/tutes/tutorial_CSS_Generated_Faux_Pipe_Delimited_Unordered_List.php __ 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] A little layout advice please...
Perhaps Layout Gala has something you could adapt? http://blog.html.it/layoutgala/ Hmmm - but liquid layouts (the ones I've seen and worked with) are dependent on the browser window width, and that's not what needs to happen here. This needs to be *fixed* as far as the browser is concerned, but be liquid from *inside* the layout itself, depending on content. Here's a GIF: http://www.columbiacityjazz.com/PICS/page_layout.gif The Recent Items table has to be expandable beyond the current width if needed, and when that happens, the entire layout has to expand to the right with it. In a simplified form, let's say the default width for the entire layout is 800px with the left column fixed at 200px and the right column at 600px. But, a 700px image is pulled into the Recent Items right column. The column now needs to expand for the image to fit, and when it does, it needs to push the master DIV wider to accomodate as well. So our layout expands to 950px wide. Resizing the browser window width should have no effect in either case. Ideas? __ 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] Pipe List
Don - HtmlFixIt.com wrote: ~davidLaakso wrote: I am seeking a pipe menu, or a border menu that does /not/ require images and works in all versions of IE including mac/IE5.2. If I have a choice I would prefer /not/ to hack IE7.0. [trimmed] Okay David, Version 2 of my faux pipe delimited unordered list menu [1] has one less hack in it (no ie6 hack) and appears to work fine in win ie6, ie7 and ff. I don't do mac often :-) Don [1] Version 2: http://htmlfixit.com/tutes/tutorial_CSS_Generated_Faux_Pipe_Delimited_Unordered_List.php Nine captures http://www.browsercam.com/public.aspx?proj_id=337404 No pipes: IE5.0/Win2000 Pipes appear but not in correct place (s): Mac/IE5.2 ~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] Pipe List
David Laakso wrote: I am seeking a pipe menu, or a border menu that does /not/ require images and works in all versions of IE including mac/IE5.2. If I have a choice I would prefer /not/ to hack IE7.0. David, I had some (now old) horizontal list tests not using inline elements but floats, exactly to overcome the problems that you are seeing now in IE 5.01/Win (missing borders), and maybe other problems in IE5/Mac. Some have extra hacks to simulate a min-width. I have now slightly revised them [1], have a look if you like. I'm sure you will find they are broken in some conditions :-)) Bruno [1] http://brunildo.org/test/NavBar8.php __ 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] A little layout advice please...
Les Mizzell wrote: Hmmm - but liquid layouts (the ones I've seen and worked with) are dependent on the browser window width, and that's not what needs to happen here. This needs to be *fixed* as far as the browser is concerned, but be liquid from *inside* the layout itself, depending on content. Sounds like a whole bunch of contradictions - or a table-based design, so maybe a monstrosity like this will do... http://www.gunlaug.no/tos/moa_10.html 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] stairstep listings in IE7 need a fix!
Hi, I am trying to do a new menu here using a definition list: http://www.usprayercenter.org/test_new_list.html It looks fine in Mozilla and Netscape but the main links are stairstepping in IE7. I don't know what it looks like in other browsers so if someone can give me some feedback on other browsers I would appreciate it. How would I fix this for IE7? Sincerely, Melinda Odom Design Hosting, Inc. www.designhosting.biz 479-471-0891 -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.446 / Virus Database: 268.18.25/745 - Release Date: 4/3/2007 12:48 PM __ 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 scroll bar in Opera
Hi all,
The document is valid XHTML and CSS and is hosted at:
http://www.clickmaujor.com/tiradentes/index.html
Everything goes fine in FireFox - IE 5.5 6 - (IE7 not tested yet, but would
appreciate a report). All under Windows
Things go wrong with Opera 9.
I'm having an unnecessary horizontal scrollbar
and it seems that the problem comes from the
following CSS:
#principal {
margin-bottom:20px;
margin-right:22px; /* === Fix Opera - Comment this CSS declaration
and the horizontal scrollbar disappear but the layout broke */
width:580px;
min-height:307px;
...
}
It would be great to have a way to get rid of the horizontal scrollbar in Opera.
Appreciate any help and thanks
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] A little layout advice please...
Sounds like a whole bunch of contradictions It is, that's part of the problem! I'm tempted to say Can't be done exactly the way you wish... __ 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] Bug with extra space from clears. New?
Hi all, I was helping a friend solve a problem just now and was able to isolate a bug that's caused by a clear:left or clear:both on an element; the first div in a series ends up with a bunch of extra whitespace (several lines) before the cleared element, but the rest of the divs are fine. This is in Safari, Firefox, Opera, not in IE6 or 7 on Win. clear: right has no such problems and using it was how I resolved his layout. Has anyone seen this bug before? If not, I can throw together a quick isolated test case for the general edification. Cheers, - Brandon __ 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] The footer
The footer on my subpages stays at the top Go to: http://mypracticesite.com/aboutmontessori.htm Any help will be most appreciated. PS- placement of headers I am still working on. Thanks. John Shepard __ 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] Pipe List
Bruno Fassino wrote: David Laakso wrote: I am seeking a pipe menu, or a border menu that does /not/ require images and works in all versions of IE including mac/IE5.2. If I have a choice I would prefer /not/ to hack IE7.0. David, I had some (now old) horizontal list tests not using inline elements but floats, exactly to overcome the problems that you are seeing now in IE 5.01/Win (missing borders), and maybe other problems in IE5/Mac. Some have extra hacks to simulate a min-width. I have now slightly revised them [1], have a look if you like. I'm sure you will find they are broken in some conditions :-)) Bruno [1] http://brunildo.org/test/NavBar8.php Absolutely superb! All of them. Looking good in /all/ versions of IE, including IE/Mac. Captures for the curious: NavBar8 http://www.browsercam.com/public.aspx?proj_id=337457 NavBar3 http://www.browsercam.com/public.aspx?proj_id=337462 NavBar5 http://www.browsercam.com/public.aspx?proj_id=337465 NavBar6 http://www.browsercam.com/public.aspx?proj_id=337468 NavBar7 http://www.browsercam.com/public.aspx?proj_id=337473 Thank you, Bruno! 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] Bug with extra space from clears. New?
From: Brandon Oto [EMAIL PROTECTED] I was helping a friend solve a problem just now and was able to isolate a bug that's caused by a clear:left or clear:both on an element; the first div in a series ends up with a bunch of extra whitespace (several lines) before the cleared element, but the rest of the divs are fine. This is in Safari, Firefox, Opera, not in IE6 or 7 on Win. clear: right has no such problems and using it was how I resolved his layout. Has anyone seen this bug before? If not, I can throw together a quick isolated test case for the general edification. Ah, Brandon! Welcome (back). It's nice to see that an old regular will still drop by now and then. I'm sure someone's seen this before, there are many here smarter and more observant than me, but a test case would be welcome anyway. Yes, it helps with the general edification, definitely. Cheers! ~holly __ 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] Selectors to cover wide range of IDs for Firefox
On 4/2/07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: This is a long shot...in the dark, but here goes: I have a td that has an ID on it, it is part of a Content Management System. Every time a new template is created in the CMS the td's ID changes to a different value. template one: td id=lc110text here/td template two: td id=lc111text here/td template two: td id=lc113text here/td My question is; is it possible to specify a CSS 2.1 or 3.1 selector that can cover a range of values? I only need this to work in Firefox, so compatibility with IE is not an issue. I've poked around on: http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/ This looks close: Substring matching attribute selector E[att^=val] Matches any E element whose att attribute value begins with val. The only problem is that there are other TDs that have IDs that begin with lc that I do not want to target. Any ideas? This is an attempt at a quick fix solution that only needs to work for Firefox. If you can list all the possible values of 'id' , then this should work: TD[id~=lc110 lc111 lc113] This will match any TD where the id is lc110, lc111, or lc113. http://www.w3.org/TR/CSS21/selector.html#q10 dcm __ 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] Selectors to cover wide range of IDs for Firefox
On Apr 3, 2007, at 9:43 AM, [EMAIL PROTECTED] wrote:
I have a td that has an ID on it, it is part of a Content Management
System. Every time a new template is created in the CMS the td's ID
changes to a different value.
template one: td id=lc110text here/td
template two: td id=lc111text here/td
template two: td id=lc113text here/td
...
This looks close:
Substring matching attribute selector
E[att^=”val”]
Matches any E element whose att attribute value begins with “val”.
Yes that is what you want to use
The only problem is that there are other TDs that have IDs that
begin with
lc that I do not want to target.
How do you select those that you don't want to target. Do they get a
class appended?
If yes, it is easy:
td[id^=lc]:not([class=bou]) {color:#fff; background:lime}
/* works in Gecko, Safar/WebKit/Konqueror */
or
td[id^=lc] {color:#fff; background:lime}
td.bou {color:#000; background:#fcf;}
/* works also in Opera and IE 7 */
sample:
http://dev.l-c-n.com/_temp/tmp-h190405.html
If no class on td available, it becomes more difficult.
If you happen to know a range of numbers for those ID's, possibly
something like
td[id^=lc]:not([id^=lc3]) /* omit all those that start with lc3 */
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pipe List
On Apr 5, 2007, at 7:54 AM, Bruno Fassino wrote: I had some (now old) horizontal list tests not using inline elements but floats, exactly to overcome the problems that you are seeing now in IE 5.01/Win (missing borders), and maybe other problems in IE5/Mac. Some have extra hacks to simulate a min-width. I have now slightly revised them [1], have a look if you like. I'm sure you will find they are broken in some conditions :-)) Bruno [1] http://brunildo.org/test/NavBar8.php You could of course minimise on hacking and use display:inline-block for everybody. Then use display:-moz-inline-box for Gecko =1.8 (up to Firefox 2.0 - Gecko1.9alpha, FX 3.0alpha support inline-block pretty well) if needed (more often than not, I don't really need it). IE 5.0 may need a little kick in the pants. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
