Re: [css-d] IE issues with element width
www.captureintegration.com I apologize for making this my first post. I hope I can make contributions to this community after I have a little more experience, but for now I am a lost newbie. I have managed to style a Wordpress website to my liking after many months of experimentation (I am a photographer, not a web designer). The website renders as I want it to in firefox and safari (both win and mac versions). In IE7 the main element is rendered too wide and is forced below the sidebar. I've honestly tried googling to get an answer since I'm sure it is not complicated, but all I could find was references to quirks mode and I relatively sure I am not in quirks mode. Like I said, I am a photographer, and find it difficult to decode the gobbly-gook of cross-platform compatibility. Could someone give me a hand in figuring out why this element is wider in IE7 than firefox/safari. I would really appreciate it! I have had a look but sorry don;t have time to diagnose completely but it looks like it is the IE arithmetic tripping it up. Have you tried reducing the width of the bloque/noticias wherever it has a set width? Usually this is due to bad percentage calculation by IE but I cannot find any percentage widths set but I am sure that's the place to look. Or give the 'everything' container a tad more width? -- Marten Gallagher annerykiln.co.uk Web Design and Management __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] whiteout Problem on IE7
Hy Folks, I'm working on a specific bug on the site I'm developing right now for something like a week and its driving me crazy. The Site is rendered on IE6 and FF like intended (some minor positioning glitches), but on IE7 a whole part of the Site just disappears after you start using it until you force a redraw of the window (by resizing the browser i.E.). If anybody has an idea how to get rid of that Problem I would be infinitely thankful. Summary: URL: http://ca.communalaudit.at User: demosubscriber Pass: demouser Scenario: 1. After Log in click on one of the entries in the left sidebar (i.E. Wasserversorgung) 2. Now start scrolling around a bit. 3. Enter some values in the input Fields and tab to the next (auto save should occur) 4. Hover over a question text until you see an Information icon. On Click this Icon should open a Description Field for the Question. (this contains some invalid legacy markup which will be cleaned out and has nothing to with the problem, i tried it) 5. Sooner or later the #main div (containing the questions) will whiteout until you resize the browser window. Any Help greatly appreciated -- Yours sincerely Milan Zoufal __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Margin (?) problem with menu.
Hi everyonecan anyone spot the Waldo in my css on this page... my dev site is athttp://public.alliancepacific.com/Corporate/About_Us I am having a hard time finding out why the top level UL's appear to have a margin which does not allow the menu to squeeze up to the header. If anyone could give me a hand I would really appreciate it. Thanks! rolland __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer CSS Coding
Rick Good schrieb:
I've designed a site that works:
www.themeridiangrp.com
In creating the footer though I needed to set each page separately,
e.g.,
.meridian #footer_650, #footer_700, #footer_750, #footer_800,
#footer_900, #footer_950, #footer_1000, #footer_1050, #footer_1150,
#footer_1250, #footer_1300, #footer_1400, #footer_1450, #footer_1500,
#footer_1600, #footer_1700, #footer_1800, #footer_1900, #footer_2000,
#footer_2250, #footer_2500, #footer_4800 {
position: absolute;
left: 0px;
padding: 0;
...
}
.meridian #footer_650 {
top: 650px;
}
.meridian #footer_700 {
top: 700px;
}
This should not be necessary, but everything I've tried - including:
.meridian #footer {
position: absolute;
bottom: 40 px;
left: 0 px;
...
does not work.
Since it's working I'm not overly concerned, but I would like to know
the right way to do it.
Thanks.
Rick
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Hello,
what exactly are you trying to achieve? Something like stickyFooterAlt:
http://www.themaninblue.com/writing/perspective/2005/08/29/
Best regards,
Christian
*Directmedia Publishing GmbH* · Möckernstraße 68 · 10965 Berlin
www.digitale-bibliothek.de
AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737
Geschäftsführer: Ralf Szymanski · Erwin Jurschitza
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Margin (?) problem with menu.
rollandburn wrote: Hi everyonecan anyone spot the Waldo in my css on this page... my dev site is athttp://public.alliancepacific.com/Corporate/About_Us I am having a hard time finding out why the top level UL's appear to have a margin which does not allow the menu to squeeze up to the header. If anyone could give me a hand I would really appreciate it. Thanks! rolland Reduce the height set on the header to around 146px. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Footer CSS Coding
I've designed a site that works:
www.themeridiangrp.com
In creating the footer though I needed to set each page separately,
e.g.,
.meridian #footer_650, #footer_700, #footer_750, #footer_800,
#footer_900, #footer_950, #footer_1000, #footer_1050, #footer_1150,
#footer_1250, #footer_1300, #footer_1400, #footer_1450, #footer_1500,
#footer_1600, #footer_1700, #footer_1800, #footer_1900, #footer_2000,
#footer_2250, #footer_2500, #footer_4800 {
position: absolute;
left: 0px;
padding: 0;
...
}
.meridian #footer_650 {
top: 650px;
}
.meridian #footer_700 {
top: 700px;
}
This should not be necessary, but everything I've tried - including:
.meridian #footer {
position: absolute;
bottom: 40 px;
left: 0 px;
...
does not work.
Since it's working I'm not overly concerned, but I would like to know
the right way to do it.
Thanks.
Rick
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Margin (?) problem with menu.
jeezthat was too easy. Sometimes when you stare at something for hours on end its hard to see the simple solutions. thanks alot David. On 22-Jan-08, at 11:01 AM, David Laakso wrote: rollandburn wrote: Hi everyonecan anyone spot the Waldo in my css on this page... my dev site is athttp://public.alliancepacific.com/Corporate/About_Us I am having a hard time finding out why the top level UL's appear to have a margin which does not allow the menu to squeeze up to the header. If anyone could give me a hand I would really appreciate it. Thanks! rolland Reduce the height set on the header to around 146px. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Margin (?) problem with menu.
rollandburn wrote:
Hi everyonecan anyone spot the Waldo in my css on this page... my
dev site is athttp://public.alliancepacific.com/Corporate/About_Us
I am having a hard time finding out why the top level UL's appear to
have a margin which does not allow the menu to squeeze up to the header.
If anyone could give me a hand I would really appreciate it.
Thanks!
rolland
From what I can see, it's the h3 element in sidebar which has the space
above it, just below the menu:
you have:
#sideBar h3 {
border-bottom:1px solid #CC;
color:#003462;
font-size:1.1em;
margin: 10px; /* adds 10px all around */
padding:0px;
I changed that commented line (in Firebug) to
margin: 0 10px;
And things looked a bit more 'together'.
I'm sure more advanced minds will have better answers :)
HTH,
-Ray
--
Non scholae sed vitae discimus
=
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] : The way IE6 clears
Hello, it seems to me that Firefox or IE7 - if an object has clear: left, right or both - only clear floated objects up to a parent that is positioned absolutely or relatively. IE6 seems to clear all floated objects on the page. Is that correct? I have a two column layout: left menu column and main content column. The left menu is floated left. The content (position: relative) contains blog entries, thus several divs following each other. Every div contains - title - main text, may contain left or right floated images - footer div with link to comments I had to set the floated images to position: relative because otherwise they go under the blog enrty divs (in terms of z-order) and thus are hidden. When the main text is short, but there is a floating image, in IE6 the footer goes right under the main text. Thus I thought I can set the footer to clear: both. But then it clears the left menu column as well... The page isn't public therefore I cannot provide a link. Best regards, Christian *Directmedia Publishing GmbH* · Möckernstraße 68 · 10965 Berlin www.digitale-bibliothek.de AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737 Geschäftsführer: Ralf Szymanski · Erwin Jurschitza __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer CSS Coding
I've designed a site that works: www.themeridiangrp.com In creating the footer though I needed to set each page separately... -- Hi Rick, The site may work for you, but try resizing your text up a couple of notches and you'll find that a lot of it disappears beneath your footer and cannot be viewed. Position:absolute, in general, is not really the best way to position large blocks as it removes that area from the flow of the page. http://www.w3.org/TR/REC-CSS2/visuren.html#absolute-positioning I'd suggest that you maybe try a different layout, something like this one should work for you: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayou t/2-col/ Hope that helps, James __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer CSS Coding
Rick Good wrote: I've designed a site that works: www.themeridiangrp.com Since it's working I'm not overly concerned, but I would like to know the right way to do it. Thanks. Rick A page or site working on the Web is relative to any users discretion. Font-scaling and reducing window width kind of does a number on your page. Layouts that rely on absolute positioning for the base structure and set of height on content containers are often brittle in the sense they break easily with any variation whatsoever from what the author dictated. Float structured layouts that do not restrict height, let the browser software determine height based on the amount of content in containers, and clear the footer-- tend to do much better regardless of user discretion. It's not so much a matter of the right way to do it, as it is a matter of how can one be a good host or hostess to whomever visits our site. Best, ~dL __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu box that floats with scrolling
I simply use for this:
HTML
div class=fixed
Foo Bar
/div
CSS
.fixed {position:fixed;}
Hope it help -- ;-)
On Jan 21, 2008 4:39 PM, [EMAIL PROTECTED] wrote:
Hello lists.css-discuss.org
I have seen the effect on at least two sites, one of which is
http://www.quirksmode.org/css/display.html
For PPK's example, I saved the page in which
show site navigation, show page contents
stay visible as I scroll down the view.
Disabling the *.js file stops those menus from opening, but not from
scrolling, suggesting control is by the CSS.
His structure uses DIV to nested depth four.
Simple copy and paste into a new file did not work.
Please explain.
Thanks,
brane [EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
Gabriel de Oliveria Padoan
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer CSS Coding
Rick Good wrote:
www.themeridiangrp.com
.meridian #footer { position: absolute; bottom: 40 px; left: 0 px;
...
does not work.
You're absolute positioning all main elements, which means the
#container doesn't stretch the full pageheight since A:P elements don't
take up space and can't be contained.
#container and body only contains the header, and only a CSS error
(check with the CSS validator) prevents body from collapsing completely.
Since it's working I'm not overly concerned, but I would like to know
the right way to do it.
1: it doesn't _really_ work since you've based your top:values on an
unaltered font-size, and font-size is a variable in all browsers.
This means content is overflowing and parts are hidden at my end, since
I require a larger font-size than you have anticipated.
2: you can use floats and float-containment for main elements
(containers), and must then remove _all_ absolute position references
for main elements.
This will make the #container/body expand to allow for
bottom-positioning as your CSS example shows, and also allow you to
simply clear a non-positioning footer below the other non-positioned
elements. These are the right methods - if right is the right word
here, and they'll both work regardless of content-/page-height.
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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Position image at bottom of cell containing text
John Nichel wrote: Hi, With our company being between designers at the moment, some of the day to day tasks of our site have fallen into my lap (hey, you're in IT, you fix the web site). What I'm trying to accomplish seems like it should be pretty simple, but the solution has escaped me. If you look at this page here: http://www.kegworks.com/product.php?productid=18754 you will notice that the Add to cart buttons under If You Like This, You May Also Like... do not line-up across the page. I've been trying to force these input images to line up with the bottom of the table cell containing them, but nothing I've done seems to have worked. I have tried using an 'inline style', tried creating a new style, etc. I've used things like align=bottom, vertical-align: bottom|baseline|absbottom, etc. However, the images stay in their current position. Can anyone give this old sysadmin some pointers, or point me to some documentation which will explain this to me (even if it cannot be done)? Thanks. Hi John, As this was thrown into your lap, I'll refrain from commenting on the tables within tables within tables withinad nauseum design If you change the following: td width=149 valign=bottom height=190 align=center style=border-right: 1px solid rgb(203, 192, 167); padding: 0px; /td td width=149 valign=top height=190 align=center style=border-right: 1px solid rgb(203, 192, 167); padding: 0px; /td td width=149 valign=top height=190 align=center style=border-right: 1px solid rgb(203, 192, 167); padding: 0px; /td td width=149 valign=top height=190 align=center style=border-right: 1px solid rgb(203, 192, 167); padding: 0px; /td by changing all the 'valign=top' references to 'valign=bottom' your buttons will line up evenly. HTH, -Ray -- Non scholae sed vitae discimus __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Horizontal Vertical scroll bars appear in IE even tho overflow: hidden
Hi List, I'm having a problem that's driving me nuts. I have a scrolling message in an iframe, and it looks perfect in Firefox, Netscape Opera, the problem is only in IE Problem #1 the iframe (style is inline) is flush left. Putting any sort of margin or padding messes it up in the other browsers. Problem #2 There is a vertical scroll showing even tho I have overflow: hidden Does anyone know what's going on - or how to fix it? Here's the page - and Thanks!! http://www.kcsm.org/marquee.php Thanx, Juanita, Webmaster KCSM TV/FM 650.524.6927 [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal Vertical scroll bars appear in IE even tho overflow:
Much Thanx Georg In the meantime - we also figured out a workaround. Due to conflicting style on our page, we set the left right margin to be the same! Thanx, Juanita, Webmaster KCSM TV/FM 650.524.6927 [EMAIL PROTECTED] Gunlaug Sørtun [EMAIL PROTECTED] on Tuesday, January 22, 2008 at 6:38 PM -0800 wrote: Juanita wrote: I have a scrolling message in an iframe, and it looks perfect in Firefox, Netscape Opera, the problem is only in IE http://www.kcsm.org/marquee.php The quick fix... iframe src =marquee_iframe.php style=overflow:hidden; height:4.5em; width:32.5em; border:0; padding: 0; margin:0 0 .75em 0; _margin-left: 20px; scrolling=no ...where 'margin-left' targets IE6 (and older) using the leading underscore hack, and the 'scrolling-attribute' is set to no. Not the nicest fixes in the book, but they work with no negative side-effects in your case. 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/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal Vertical scroll bars appear in IE even tho overflow: hidden
Juanita wrote: I have a scrolling message in an iframe, and it looks perfect in Firefox, Netscape Opera, the problem is only in IE http://www.kcsm.org/marquee.php The quick fix... iframe src =marquee_iframe.php style=overflow:hidden; height:4.5em; width:32.5em; border:0; padding: 0; margin:0 0 .75em 0; _margin-left: 20px; scrolling=no ...where 'margin-left' targets IE6 (and older) using the leading underscore hack, and the 'scrolling-attribute' is set to no. Not the nicest fixes in the book, but they work with no negative side-effects in your case. 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/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
