[css-d] follow up on: 'can anyone see my content disappearing'
i wrote: i am told that on the wine pages contact page: http://www.tuttobenewines.com/contact.html http://www.tuttobenewines.com/contact.html http://www.tuttobenewines.com/wines-rosso.html http://www.tuttobenewines.com/wines-rosso.html http://www.tuttobenewines.com/wines-bianco.html http://www.tuttobenewines.com/wines-bianco.html i have a disappearing content bug in IE6 win SP2. I cannot for the life of me recreate it - despite seeming to have the same environment, so i'm am having difficulty fixing it. Any guideance would be greatly appreciated, -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ -+-+-+-+-+-+ i got lots of advice from lots of folks - Ingo, Lori and lots of folks that just said it looked great. thanks to everyone. Because of the vagueness of the client complaint we had lots of speculation as to what the problem might be - and I for one learned a lot about high resolution display on dell laptops. :-) turned out to be three things, I believe: 1 - i did have an IE disappearing content bug which I solved with Ingo's haslayout suggestion 2 - the client was looking at a jpg comp and then looking at his page in IE with View Text Size Largest, even though he has perfect vision, and was unhappy that what he saw didn't match the comp. when i finally was allowed to speak to the client, this was easy to clear up. 3 - when the text size was bumped up, it wrapped poorly, which I believe I have since corrected. (thanks again to a suggestion from Ingo!) the client didn't end up having a high resolution display, but I'm so glad I got to learn all about it anyway. :-) thanks so much to everyone who lent a hand! __ 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] centering elements via margin: auto
On 02/07/07, Josue Martinez [EMAIL PROTECTED] wrote:
Alan, the problem with that is that, at least as of a few years ago, IE6/Win
does not center the container with #container {margin: 0 auto;}, which is
why the text-align: center is applied to the body element.
Only in Quirks mode. http://dorward.me.uk/www/centre/#ie
--
David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk
__
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] Wordpress Blog Style Question - Page/Screen Width Adjustment
Www.capitalistslog.com. I¹m trying to get the page margins the correct width to accommodate the Google Ads and Search I added. Can¹t seem to get it to go the proper width on the left and the screen/color is off. Chris [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] a different approach for positioning
We started building a form generator with a drag and drop interface and hit the often mentioned float versus absolute discussions. I've invented a different approach that has the flexibility of absolute positioning without the negative side effects but need some advice on some specific issues and look forward to your comments. What is our goal? We want to provide the user with a canvas with lines in it to position form elements through a drag and drop interface. Form elements need to be aligned some way irrespective of the width of the form elements to the left or right to make for attractive and usable forms. If we do this the 'floated' way we give every element in one line a float: left and some margin-left: xyz to get it aligned properly. But this way the amount of margin-left is dependent on the width of the preceding element. Hence, after every adjustment all the margins will have to be recalculated. Not very nice. Besides that, floats are quite cumbersome when the content grows larger than the containing element as, amongst others, Shaun Inman pointed out: http://www.shauninman.com/archive/2006/05/22/clearance_position_inline_absolute. If we do this the 'absolute' way we give every element position: absolute and some amount of top: xyz and left: xyz. But absolutely positioned elements have no height, hence the lines collapse and do not adjust to the height of the content inside a form element (which for example could be an ul with many li's inside that need to be displayed vertically). A different approach After fiddling around for some time I concluded we had to abandon absolute positioning at all since this way elements are removed from the normal flow altogether. So the trick was to find some way to start calculating the margin-left from a fixed position, not from the right of the element sitting left. I've managed this with a combination of position: relative + left: 100% and using negative margins instead of positive. Every form element has an extra content div to prevent the redraw bug in IE6. You can see a fixed-width example at http://www.solide-ict.nl/sitesdir/solidedrupal/formbuilder.html and a liquid example at http://www.solide-ict.nl/sitesdir/solidedrupal/formbuilder-liquid.html. I've called my blog 'simulated absolute positioning' but is only in Dutch yet :-(. No hacks but some issues remain Our CSS requires no hacks to work with all modern browsers (Safari, Opera, Firefox, IE7) and IE6. It does not work in IE Mac 5 but since this product is deprecated this is not on our priority list. The approach seems very stable, since elements grow vertically if necessary and the layout does not break when for example a background image is larger then the element itself. It is valid and does not influence the element order in html. However, IE6 has a problem rendering this CSS when the size of the viewport is changed. After a refresh everything aligns OK so I think this has nothing to do with hasLayout issues. I suspect some form of quirky percentages (see http://www.positioniseverything.net/explorer/percentages.html) is hindering this approach in IE6 (at least). Another issue is the layout breaks when an element is larger than the canvas. It would be better if the elements would stick out of the canvas. I am quite enthusiastic about this approach and see many opportunities for it. I did some research but haven't seen it posted elsewhere. I would welcome your feedback, testing in other browsers and especially suggestions to overcome the rendering issues in IE6. Anyway, thank you for your attention. Eric Sol, [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] div text centering issue, IE layout issues (gee, really?)
Hi all, It's always the freebies that give me a headache :) I'm working on a site which amounts to a simple 3 column layout in appearance. My current issues are 1) the text in h1 and h2 aren't centering despite text-align: center; being stated and 2) IE7 drops the 'content' div way down in the viewport. It's been a long weekend of non-coding and I need to hit this hard today. Any/all help is greatly appreciated. site: http://devel.legionpost130.org/index3.php css: http://devel.legionpost130.org/styles/legionpost130-3col.css Best regards for a layout-incompatibility-free week :)) ~Ray __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Having an Anchor span block level elements
On Monday 02 July 2007 01:34, Robert James wrote: On 7/1/07, Mark Kelly [EMAIL PROTECTED] wrote: On Sunday 01 July 2007 21:50, Robert James wrote: I'd like to have an entire DIV, including H2's, be a hyperlink (A). (Why? Imagine a web app with various panels with can be clicked on). Have you considered the button form element rather than using a div? Interesting approach... is it possible to do this without a form - with a simple href? You aren't exactly asking about a simple href though, are you? It certainly can't be done the way I suggested without the form, as button is a form element. If you look at the brief example I posted, you can see that the destination for the link is defined in the action of the form element, so you can hardly miss it out and expect to get a working link. Mark __ 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] Strange Print Issue
Thank you, that was exactly the fix I needed.
Much appreciated.
Robbert
From: Robbert van Andel [EMAIL PROTECTED]
In particular the text appears outside the borders of the containing
division. when printing
Can any suggest what I can do to fix this?
http://www.salemhospital.org/clinicalresearch/print.php
IE needs layout [1] on at least two elements. Add {zoom: 1;} to the -
div.trials_title, div.trials_treatment, div.trials_eligibility - selector (only
tested in IE6, by the way). Note that this will not validate.
You might consider placing a complete doctype on your page as well, though it
doesn't seem to make a difference with the printing issue. See [2] for more
information about doctypes.
~holly
[1] http://www.satzansatz.de/cssd/onhavinglayout.html
[2] http://www.communitymx.com/abstract.cfm?cid=E2F258C46D285FEE
__
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] Does line-height override height in IE6 and lower?
Hi, Matt... I've been wrestling with a similar issue, although with different elements. I have some lines of text that vertically space well in FF2 and IE7, but IE6 was spacing them too far apart. What solved my problem and got IE6 to react to my line-height spec was to give the containing div and line-height attribute. If I used a div as a spacing element, such as div style=height:6px; width:6px;/div, FF2 and IE7 displayed good spacing. However, IE6 displayed a larger vertical gap. If I changed the code and added a line-height value, such as div style=height:6px; width:6px; line-height:12px;/div, then IE6 displayed the same vertical spacing as FF2 and IE7. It solved the problem for me. Hopefully, an application of this solution particular to your problem can help you, too... it was really driving me crazy for awhile. Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Matt Dawson Sent: Saturday, June 30, 2007 2:13 PM To: css-d Subject: [css-d] Does line-height override height in IE6 and lower? Hi all - It may turn out that I need to describe the particulars of my problem, but first I thought I'd try paring the case down to just its bare essentials. I have an unordered list. Each list item is a single word long and has a height of 12px applied to it. However, in IE6, the base line-height I've applied earlier in the document (which is part of a collection of general browser reset rules I use for all my projects) is calculating to a value larger than 12px. In all browsers except IE6 and lower, changing the height does what I expect. That is, if I make the height of the list element 2px, all but 2px of the list element's content disappears. In IE6, because the line-height is calculating to a larger value, changing the height has no effect. Is this part of an already documented bug? I've been googling for a good hour trying to find another documented instance of this, and I can't find anything. Thanks for your help! Matt __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE6 problem; gap or extra margin? in header
Thought i could figure it out myself. Checked out positioniseverything for ie bugs. But can't find it. In the header there are 2 images. IE7, Firefox and the others display them ok. But with IE 6 there's a gap under the images. Tried all sorts of adjustments. But the gap won't go. This is the page and css: http://beta.erikvisser.net/tro/index.php positioning: http://beta.erikvisser.net/tro/css/style.css styling: http://beta.erikvisser.net/tro/css/makeup.css menu:http://beta.erikvisser.net/tro/css/pde.css menu:http://beta.erikvisser.net/tro/css/menu.css ie only: http://beta.erikvisser.net/tro/css/ie.css Css files are not optimal yet. Especially the 2 css files for the menu should be cleaned up. Rest is quite ok. Any thoughts? Thanks, Erik Another problem is quite a long page in Opera (Mac OSX, Opera 9.02). __ 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] css menus-flash-javascript
Hi, I have this flash working using the javascript but wanted to make it work using either straight css or an iframe. This is the iframe: http://www.usprayercenter.org/test.html The problem is the menus stop going over the flash and hide behind it because it won't validate with wmode or opaque which is what makes the menus go over the flash in the javascript. Is there another way to do this besides using javascript? Thanks! 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.476 / Virus Database: 269.9.14/883 - Release Date: 7/1/2007 12:19 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/
Re: [css-d] IE6 problem; gap or extra margin? in header
Hey Erik, The space is probably because CSS sometimes treats images as text with the baseline below, acting as space. To get rid of it you either have to add display: block; to the image or a float: left; to the image Kevin On Jul 2, 2007, at 12:31 PM, Erik Visser wrote: Thought i could figure it out myself. Checked out positioniseverything for ie bugs. But can't find it. In the header there are 2 images. IE7, Firefox and the others display them ok. But with IE 6 there's a gap under the images. Tried all sorts of adjustments. But the gap won't go. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css menus-flash-javascript
Hi Melinda, I had the same problem on a site I did recently. http://www.televisual.com/festival/ Set the wmode of the Flash movie to transparent and set the z-index of your menus to 100 (or something). Let me know if that works. Marcus Hi, I have this flash working using the javascript but wanted to make it work using either straight css or an iframe. This is the iframe: http://www.usprayercenter.org/test.html The problem is the menus stop going over the flash and hide behind it because it won't validate with wmode or opaque which is what makes the menus go over the flash in the javascript. Is there another way to do this besides using javascript? Thanks! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] iframes - who still uses them
Hi, Looking at the last post it got me thinking. Does anyone still use frames or iframes? Is it a valid development technique? R. __ 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] iframes - who still uses them
Ross wrote: Does anyone still use frames or iframes? Is it a valid development technique? Depending upon what you are doing with them, an iframe may be the only way to achieve a desired effect. Say, you want a webpage with a section of the page that tells you in big, blue letters that you have a new personal message. Fine, now add the caveat that you want it to display when you have a new message without making your end user refresh their page. Now you need an iframe with javascript to make it refresh every so often so that ITs information will be current but your user can still browse at their leisure. There must be other uses for them, but I've never really run into a project that I had to use them. -- Thanks, 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] iframes - who still uses them
Hi, Looking at the last post it got me thinking. Does anyone still use frames or iframes? Is it a valid development technique? R. We are using an iframe on our homepage to incorporate a secure page for login purposes. I will say that this has proved to be a challenge with the new browsers disabling navigate sub-frames across different domains and with McAfee disabling the iframe tag altogether with their Privacy Service. I love the function of them but it's been frustrating. I haven't found a good alternative. Russ __ 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] iframes - who still uses them
| Ross wrote: | Does anyone still use frames or iframes? Is it a valid | development technique? | Depending upon what you are doing with them, an iframe may be | the only | way to achieve a desired effect. Say, you want a webpage with | a section | of the page that tells you in big, blue letters that you have a new | personal message. Fine, now add the caveat that you want it | to display | when you have a new message without making your end user | refresh their | page. Now you need an iframe with javascript to make it | refresh every so | often so that ITs information will be current but your user can still | browse at their leisure. | | There must be other uses for them, but I've never really run into a | project that I had to use them. I use iframes on my website to display my photography work: www.objectivedesigns.com/photography.htm. I prefer it to making the links go to entirely different pages or opening in new windows. Daniel Hammond 2227 Dunseath Avenue 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/
Re: [css-d] iframes - who still uses them
Russ Peters wrote: Hi, Looking at the last post it got me thinking. Does anyone still use frames or iframes? Is it a valid development technique? R. We are using an iframe on our homepage to incorporate a secure page for login purposes. I will say that this has proved to be a challenge with the new browsers disabling navigate sub-frames across different domains and with McAfee disabling the iframe tag altogether with their Privacy Service. I love the function of them but it's been frustrating. I haven't found a good alternative. Russ __ 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/ Sadly, I've been forced into working with an iframe-based design due to a previous designer's penchant for them. When I'm able (it's a time thing...), I plan to re-do my data recovery client's website using a div with overflow: auto; to take the place of the iframe where, in this case, it's not really needed at all. So, yes, there are iframes out there...but for many reasons including validation and SEO, to my mind, iframes are a big no-no. ~Ray __ 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] [ADMIN] Re: iframes - who still uses them
Ross wrote: Does anyone still use frames or iframes? Is it a valid development technique? It's not a valid question for this list. This thread is off-topic and needs to end now. Thanks, Zoe Gillenwater css-d list moderator __ 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 different approach for positioning
Eric Sol wrote: snip However, IE6 has a problem rendering this CSS when the size of the viewport is changed. After a refresh everything aligns OK so I think this has nothing to do with hasLayout issues. I suspect some form of quirky percentages (see http://www.positioniseverything.net/explorer/percentages.html) is hindering this approach in IE6 (at least). Another issue is the layout breaks when an element is larger than the canvas. It would be better if the elements would stick out of the canvas. Anyway, thank you for your attention. Eric Sol, [EMAIL PROTECTED] Hi Eric On a technical side, I have no idea about dropping elements into a forms generator, so I don't know if this will help, but if you give position: relative to the element div.line, all the item elements within will remain in place when resizing the viewpoint. Kind Regards, Alan __ 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] 2 IE7/Vista problems
Hi, I've made some good progress on my menu layout now (see: http://atownley.org/wip/menu3/), but I'm noticing some issues when testing on IE7/Vista that I'm not sure how to tackle. The layout is working properly on: * IE7|IE6|IE5.5|IE5.01 on Windows XPSP2 * Netscape 7.1 * Firefox 2.0.2 * KHTML 3.5.5 * Opera 9 However, there are two issues that I'm not sure how to fix for Vista. Problem #1: Son of Suckerfish based menu doesn't remain hovered even though the li elements clearly overlap (shown by the red border). Chris (360wss) pointed this out to me, but I couldn't duplicate the problem until I started playing with Vista. Any ideas what's going on and how to fix it? Problem #2: Default font size differences between WinXP and Vista cause the layout spacing to get whacked. I'm positioning most things in terms of em units so that the layout can be somewhat liquid. With the absolute positioning vs. floats, it doesn't line up exactly perfect, but it's relatively close across all of the above--except for Vista. I'd like it to be more dynamic than it is, but I want to keep the content towards the top of the body element. The added bonus of having the layout with the current ordering is that it still remains usable even without the stylesheet. Screen captures of problem #2 on XP and Vista for comparison: Windows XP: http://www.atownley.org/wip/menu3/ie7-winXPsp2-test-20070702.png Vista: http://www.atownley.org/wip/menu3/ie7-vista-test-20070702.png Any thoughts/suggestions? Thanks in advance, ast -- Andrew S. Townley [EMAIL PROTECTED] http://atownley.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 problem; gap or extra margin? in header
Kevin Evans wrote: Hey Erik, The space is probably because CSS sometimes treats images as text with the baseline below, acting as space. To get rid of it you either have to add display: block; to the image or a float: left; to the image On Jul 2, 2007, at 12:31 PM, Erik Visser wrote: In the header there are 2 images. IE7, Firefox and the others display them ok. But with IE 6 there's a gap under the images. Tried all sorts of adjustments. But the gap won't go. Thanks, that did it. Erik __ 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] div text centering issue, IE layout issues (gee, really?)
Ray wrote:
Hi all,
It's always the freebies that give me a headache :)
I'm working on a site which amounts to a simple 3 column layout in
appearance. My current issues are
1) the text in h1 and h2 aren't centering despite text-align:
center; being stated
and
2) IE7 drops the 'content' div way down in the viewport.
It's been a long weekend of non-coding and I need to hit this hard
today. Any/all help is greatly appreciated.
site:
http://devel.legionpost130.org/index3.php
css:
http://devel.legionpost130.org/styles/legionpost130-3col.css
Best regards for a layout-incompatibility-free week :))
~Ray
Hi Ray
Looking at your layout in FF first. The content (text) within your div#header
and div#content will naturally be displaced by the div#nav float. This float is
floated right and has a width of 140px and it's margin left is 450px. So the
content within your div#header and div#content will be displaced by 590px,
leaving only about 140px of the content still showing beside the float with a
viewpoint of 800px in width. Please note that I have said that the content of
the div#header and div#content will be displaced and not the divs themselves.
The margin left for the div#nav should be much smaller like 20px.
IE will behave differently. The div#header and div#content themselves will be
displaced by the float since they both have haslayout since they have a width
of 800px.
http://www.satzansatz.de/cssd/onhavinglayout.html#nextfloat
In IE, you would need a viewpoint of at least 1450px wide
(140px+450px+800px+scrollbar) before the div#header and div#content could rise
up to sit beside the float. Remove both the widths from both the div#header and
div#content and use a margin left or padding left to keep their content from
going over the emblem.
The background images need to be applied to different elements since the flag
sit over the emblem. The flag could be applied to the body element and the
emblem to the container. Test this slimmed downed CSS.
body {
font-family: Century Gothic, Helvetica, sans-serif;
font-size: 1em;
background: #FFF url('/images/American-Flag.gif') no-repeat 50% 100px;
color:#00;
}
h1 {
font-size:1.5em;
text-align: center;
}
h2 {
font-size: 1.3em;
color: blue;
text-align: center;
}
p {
line-height: 1.2em;
}
#header, #content {
margin: 20px 165px 0 230px;
}
#container {
background: url('/images/AmericanLegionColorEmblem.png') no-repeat 20px 0;
}
div#nav {
width: 140px;
float: right;
margin: 0 0 0 20px;
}
ul.navbar {
font-size: 95%;
}
ul.navbar, li.navitem {
padding: 0;
margin: 0;
list-style: none;
font-weight: bold;
}
li.navitem {
margin: 0 3px;
}
a.menu:link, a.menu:visited {
color: blue;
text-decoration: none;
}
a.menu:active, a.menu:hover {
color: red;
text-decoration: none;
}
Kind regards, Alan
__
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] nav-bar cross browser issues
Hi Everyone I've been staring at this for hours - hopefully a fresh pair of eyes will point me in the right direction. I'm developing a communal website in mambo - but am limited with the number of mysql instances I can have. The mainpage is just a jumping off page to the other sections so seemed like a bit of a waste squandering a mysql database on. I'm struggling with the top nav-bar and making it look like the mambo version - Any pointers will be gratefully received. IE aligns the nav text centre vertically Firefox doesn't. When I reduce width I get a greenline from the background showing through. Mambo Version is here: - http://news.sixvillages.co.uk Experimental frontpage is here: - http://www.redfedora.co.uk/homepage.html http://www.redfedora.co.uk/box.css.css Thanks Bryan __ 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] div text centering issue, IE layout issues (gee, really?)
Alan Gresley wrote:
Ray wrote:
Hi all,
It's always the freebies that give me a headache :)
I'm working on a site which amounts to a simple 3 column layout in
appearance. My current issues are
1) the text in h1 and h2 aren't centering despite text-align:
center; being stated
and
2) IE7 drops the 'content' div way down in the viewport.
It's been a long weekend of non-coding and I need to hit this hard
today. Any/all help is greatly appreciated.
site:
http://devel.legionpost130.org/index3.php
css:
http://devel.legionpost130.org/styles/legionpost130-3col.css
Best regards for a layout-incompatibility-free week :))
~Ray
Hi Ray
Looking at your layout in FF first. The content (text) within your div#header
and div#content will naturally be displaced by the div#nav float. This float
is floated right and has a width of 140px and it's margin left is 450px. So
the content within your div#header and div#content will be displaced by
590px, leaving only about 140px of the content still showing beside the float
with a viewpoint of 800px in width. Please note that I have said that the
content of the div#header and div#content will be displaced and not the divs
themselves. The margin left for the div#nav should be much smaller like 20px.
IE will behave differently. The div#header and div#content themselves will be
displaced by the float since they both have haslayout since they have a width
of 800px.
http://www.satzansatz.de/cssd/onhavinglayout.html#nextfloat
In IE, you would need a viewpoint of at least 1450px wide
(140px+450px+800px+scrollbar) before the div#header and div#content could
rise up to sit beside the float. Remove both the widths from both the
div#header and div#content and use a margin left or padding left to keep
their content from going over the emblem.
The background images need to be applied to different elements since the flag
sit over the emblem. The flag could be applied to the body element and the
emblem to the container. Test this slimmed downed CSS.
body {
font-family: Century Gothic, Helvetica, sans-serif;
font-size: 1em;
background: #FFF url('/images/American-Flag.gif') no-repeat 50% 100px;
color:#00;
}
h1 {
font-size:1.5em;
text-align: center;
}
h2 {
font-size: 1.3em;
color: blue;
text-align: center;
}
p {
line-height: 1.2em;
}
#header, #content {
margin: 20px 165px 0 230px;
}
#container {
background: url('/images/AmericanLegionColorEmblem.png') no-repeat 20px 0;
}
div#nav {
width: 140px;
float: right;
margin: 0 0 0 20px;
}
ul.navbar {
font-size: 95%;
}
ul.navbar, li.navitem {
padding: 0;
margin: 0;
list-style: none;
font-weight: bold;
}
li.navitem {
margin: 0 3px;
}
a.menu:link, a.menu:visited {
color: blue;
text-decoration: none;
}
a.menu:active, a.menu:hover {
color: red;
text-decoration: none;
}
Kind regards, Alan
__
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/
Alan,
Thanks for your reply. I am reading (and will continue to). I'll post
results and new URLs once I've played with it a bit.
Truly thank you for your input. I learn more and more here each day!
Regards,
~Ray
__
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] how to manage scroller/scrollbar
See: http://dottedi.biz/codesamples/hs/index.html Also: http://dottedi.biz/codesamples/hs/scroller-o.html The vision is to have the images scroll, as they do, but to butt up against a column on the right. If you widen the browser the column to the right should remain as is and more images fill the space to the left. I added an absolute positioned background which works fine for the right column, but no matter what I try I can't seem to get the images to expand to fill space without developing a scrollbar, particularly when the browser is set to 800w. If you visit www.shop.deviantart.com you will see the goal. The CSS I added is contained within the index.html file - view source. Ideas? -bob __ 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] 2 IE7/Vista problems
On Mon, 02 Jul 2007 18:45:13 +0100, Andrew S. Townley wrote: I've made some good progress on my menu layout now (see: http://atownley.org/wip/menu3/), but I'm noticing some issues when testing on IE7/Vista that I'm not sure how to tackle. The layout is working properly on: * IE7|IE6|IE5.5|IE5.01 on Windows XPSP2 * Netscape 7.1 * Firefox 2.0.2 * KHTML 3.5.5 * Opera 9 However, there are two issues that I'm not sure how to fix for Vista. Problem #1: Son of Suckerfish based menu doesn't remain hovered even though the li elements clearly overlap (shown by the red border). Chris (360wss) pointed this out to me, but I couldn't duplicate the problem until I started playing with Vista. Any ideas what's going on and how to fix it? ~ Hmm. While your menu works fine in Opera 9 this end, I was completely unable to reach the sub-menus in IE7 on Win xp. Is this what you mean? Sadly, I have zero experience with this kind of dynamic menu. Problem #2: Default font size differences between WinXP and Vista cause the layout spacing to get whacked. I'm positioning most things in terms of em units so that the layout can be somewhat liquid. With the absolute positioning vs. floats, it doesn't line up exactly perfect, but it's relatively close across all of the above--except for Vista. Again, I am seeing something different here. This is a screen shot of IE7 on Win xp pro sp2 displayed at 120 DPI: http://webwiz.robinshosting.com/images/atownley.png FWIW - I think you can expect this kind of brittleness any time you use fixed positioning to lay out major page elements. Better, I think, to go with the flow, using so-called static positioning where you can. What is the benefit of putting the main menu below the footer in the source? The only positioning you really need is to place the two main columns side by side. To keep the main content before the meta column, take a look at Ryan Brill's negative margins method: http://alistapart.com/articles/negativemargins/ HTH. 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] WinIE Hack please
On Sat, 30 Jun 2007 05:09:10 +0100, Richard Brown wrote: Back to this site again: http://familywealthdifference.com/blog/ http://familywealthdifference.com/blog/wp-content/themes/FWPItheme2/style.css On 01/07/07, David Hucklesby [EMAIL PROTECTED] wrote: Sorry to say, IE7 has problems, too. See this screen shot: http://webwiz.robinshosting.com/images/family-wealth.jpg I suggest you fix the markup errors before we attempt any hacks: On Sun, 1 Jul 2007 20:00:02 +0100, Richard Brown replied: I know about the text wrapping around the image. I have fixed all bar the ones applying to the form. I now have another problem appearing in that the border at the top of the left nav does not extend all the way. Any ideas please? Hi Richard, Sorry. I am not seeing this particular problem, either in Opera 9 or IE 7 on Win xp. All borders seem intact. Can you tell us which browser(s) show this defect? 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] iframes - who still uses them
Hi Ross- If you're referring to my IFRAMEs and max height post - I'd love to find a way to use a div with overflow to perform a similar function. My page design is essentially a menu shell that browses through content by setting the target of the iframe. Is there a way to do something similar with CSS (without having to copy the shell for each page of content)? -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ross Sent: Monday, July 02, 2007 9:31 AM To: css-d@lists.css-discuss.org Subject: [css-d] iframes - who still uses them Hi, Looking at the last post it got me thinking. Does anyone still use frames or iframes? Is it a valid development technique? R. __ 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 6 site check needed
On 7/2/07, Phil Turner [EMAIL PROTECTED] wrote: Hi Everyone I've put this site live before finishing so need someone to check it out in IE 6 please and let me know if the sites behaving. http://www.philturner-uk.com/index.html I dont think it will be behaving in IE 6and I will certainly need some advice there It's not behaving in IE6. The most obvious is the PNG's are not transparent. Your DOCTYPE is set to XHTML transitional. IE6 doesn't know XML and thus XHTML, so it goes into quirks mode (IE4). Change the DOCTYPE to HTML STRICT to get it into Standards mode then get rid of any XML markup such as forward slash end tags (e.g. /) and replace with the element (e.g. /link). It doesn't look like you have any specific XML functionality, so your page will render fine in HTML mode. However, you have a bigger problem in both IE6 and FF2.04: 1) the viewport has a LOT of whitespace on the right, as if the page is twice as wide as it's supposed to be. This is due to the wrapper div set to 2000px. 2) The text goes out of the div boundaries and overlaps when text size is increased. Your div's are absolutely positioned in pixels, which doesn't allow for elasticity when the text size or viewport is resized. Switch them to percentage or ems. -Terry __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 site check needed
I may have misstated myself about IE6 and XML. I just reread Eric Myers picking a rendering mode @ http://www.ericmeyeroncss.com/bonus/render-mode.html in which he states IE6 DOES know how to render any XML mode in standards mode. I just completed a project that required IE6 rendering and I couldn't get it to even display until I switched all tags and DOCTYPE to HTML. Somewhere along the way, I read that telling sending type=text/HTML while in XML DOCTYPE confuses IE6 (or any browser) and thus puts it into quirks mode. I didn't think to set it to text/XML and still haven't tested it. Sorry for the confusion, even if my suggestions will still work. :) -Terry __ 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/
