Re: [css-d] Problem with content left alignment in IE Win
IE windows (6.0.2 to be exact), the left margin on the content area is set to 171 px but it looks like there is about 3px or so extra from where the content is next to the navigation menu than when it gets below the navigation. http://www.wcfia.harvard.edu/wwwbeta/misc/blankGSA_template/links/index.htm Sounds like the IE 3 pixel text jog: http://positioniseverything.net/explorer/threepxtest.html HTH, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Applying basic CSS to form items
perhaps this page will help: http://css-discuss.incutio.com/?page=FormElements I couldn't believe that Roger Johannson's posts about form styling weren't there yet. Added them now: http://www.456bereastreet.com/archive/200409/styling_form_controls/ -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 bunch of questions from a time strapped newbie
As a programmer, my advise is the get your code clean, no errors or warnings. That way you have paid the syntax and can get on with making the code do what you want it to do. Try http://www.westciv.com for a tutorial on CSS. Go through it a couple of times or until you fully understand it. You might also try a prayer at the beginning of each session. Dennis - Original Message - From: Claude Bernier [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Tuesday, February 28, 2006 3:50 PM Subject: [css-d] A bunch of questions from a time strapped newbie Hello everyone, this is my fisrt post in here so I don't know yet the proper formats to post, so please bear with me! I'm very new to CSS - two weeks new - and I jumped in just to do this one web design project. I used to do web design but I gave it up ten years ago to pursue 3D animation and I never got back to it. The web site I'm building was first built using tables as I would do it back in the days but the more reading I was doing the more I realized that my methods were outdated and the updates were hard to achieve due to the site gaining in complexities and my client always changing her mind about the site structures. That why I decided to redo the complete site using CSS. Now, using different web ressources I managed to do most of it, but I'm now stuck with the good old IE compatibility issues. And I was so sure I was following the proper cross-platform compliant methods! Everything looks right in Firefox both on mac and pc but here are the problems I get in Explorer: - The top horizontal menu is weirdly cascading; - The left vertical menu in hiding under the main text area; - There's a gap between the top menu and the body of the site, due to a margin I added so it would not position itself over the top menu. I've tried to incorporate Dean Edwards's IE7 javascript collection but it didn't give me any result... I also have other questions. When I validate my code on the w3c web site it gives me a lot of color and background-color level 1 warning. Is it OK to leave them there or should I really do something for it? When I tried to add random background color it messed my page up and it won't take NONE as a value... I've been working on that for weeks now and I don't know where to look anymore. And my client must have an update soon, she bared with me on this one very patiently until now but her patience is bound to wear thin very soon. I should also mention that I am not a programmer in any sense so I will probably have to be taken by the hand to go through more difficult procedures. I wish I could say that I've written this whole site just out of knowledge but alas I must confess that it's all based on stolen bits of code I gathered here and there. I plan to get a more proper education about CSS when this is done (I'm getting to like doing web design again it seems, even though I mostly go through trying times, this thing is growing on me!) but for now I just must get this site to work in Exploder as fast as possible, and I would be infitly grateful if you guys could help me out. So, without more ado, here is the url: http://www.blendinblindinn.com/Edithluc/TEMP_Company_Whoweare.html In advance, thank you so very much for any possible help, -Claude Bernier __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 IE7b2 testing hub -- 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] IE expanding box
Hi - I know the problem is the IE expanding box thingy. I know the solution is overflow:hidden Yet I can't make it work. The page shows the way I want it to in Firefox Opera, but not in IE. Can anyone make a suggestion? I've tried the overflow:hidden on the images's property (panelpic) and when it din't work I tried it on bkdrop The end result will be a bunch of different web pages with sometimes 3 pics, sometimes 4 or 5, sometimes only one. Thanks! -JULIE http://web.princeton.edu/sites/Archaeology/rp/morgexhibit/morg1.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Right Floated Nav Source Order
This I thought was a problem until I experimented a bit. Here's how I'd get around it: -Float all the li elements left -Float the ul element right -If the ul was floated left originally, put a div around it and float that left -You might need to put a fixed with on the ul element if the li's collapse for whatever reason And that should do it! Hope it helps... Mark On 1 Mar 2006, at 15:15, [EMAIL PROTECTED] wrote: While tinkering with a set of navigation tabs I ran into a (hopefully) slight snag. What I am attempting to do: List-based series of tabs that appear on the right side of a site's header area. The Problem: I've got the tabs where I want them. I floated the UL and LI to the right, which was a great idea, until I realized what it did to the ordering of the links. As it is now, the first link in the source appears last on the page, and so on. I could easily change the order of the links in the source, but that just seems wrong. Question: How can I make this simple approach work better - source order matches the display order – and still keep the appearance of the tabs? Example page: http://www.charlestonwebsolutions.com/test_case/nav_order_01a.html Images are hot-linked if anyone wants to play around with the page. Thanks, Jono __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Right Floated Nav Source Order
-Float all the li elements left -Float the ul element right -If the ul was floated left originally, put a div around it and float that left -You might need to put a fixed with on the ul element if the li's collapse for whatever reason Yep, thanks rian and Mark. I tinkered a bit more, and came up with this: http://www.charlestonwebsolutions.com/test_case/nav_order_01b.html Seems to work pretty well. Fearful of loosing flexibility, I gave the UL a em based width - which I am still testing out. So far, it checks out OK in IE 5+, and the usual good browsers. I don't have acecss to IE Mac right now, so if anyone could run it by that stinker that would be awesome! I am pretty sure this will break in IE Mac in some strange way, but I am not 100% on that. -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] resize + scroll
i consider myself almost decent with css but can't fix this resizing small then scrolling horizontally (the background cutsoff...) Any resources anyone can point me to help with this? http://derekrogerson.com/test/index.html http://derekrogerson.com/test/screen.css Be Well, Derek __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] resize + scroll
My solution to this would be to create a image of the blue bar with red border and make a 1px width image. Then make a body rule that repeats the image across the top of the page. Then remove the styling from the header div. Hope this makes sense and helps. James MacLeod On Mar 01, 2006, at 16:12, derekrogerson wrote: i consider myself almost decent with css but can't fix this resizing small then scrolling horizontally (the background cutsoff...) Any resources anyone can point me to help with this? http://derekrogerson.com/test/index.html http://derekrogerson.com/test/screen.css Be Well, Derek __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 IE7b2 testing hub -- 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] An explanation..
Hi to all.
Here some code :
#content{
float:left;
width:540px;
text-align:left;
padding:20px;
background:#fff;
}
htmlbody #content{width:500px;}
Can somebody explain me briefly the last line : htmlbody #content
Why declare the width in this declaration and not above?
Thanks.
Regards.
Michel.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] IE/Win Print styles
Running into YAIEB (Yet Another IE Bug). URL: http://uscf.arachnidae.com/tla/tlaworkcsg2.html Styleswitcher buttons across the top. To simplify matters only the last three are hooked up. Columns - displays in green Columns (HC) displays in monochrome Reg. Form displays a printable registration form for the event. Right now all CSS files have an @media print section in them which turns off the elements I don't need printed from that view. Current state: Only the Columns choice engages a print style sheet from my IE6 Win2K test machine. The other two choices (HC and Reg Form) print styleless. Among other things I've tried linked stylesheets. I only need two print options, but if I load one of the two print stylesheets as alternate stylesheet it will never activate. If I load them both as stylesheet then I can switch in the regform stylesheet and it will print OK, but the HC one will not print. You'd think that would indicate that if I linked another copy of the normal print stylesheet and called it stylesheet and titled it for the HC display sheet, all three would work. But they don't. Anyone know a way to make alternate print stylesheets work for IE? Have Fun, Arlen -- In God we trust, all others must supply data __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Right Floated Nav Source Order
[EMAIL PROTECTED] wrote: Yep, thanks rian and Mark. I tinkered a bit more, and came up with this: http://www.charlestonwebsolutions.com/test_case/nav_order_01b.html The background line below the tabs is very much detached from the tabs in Opera (8.5). Seems to work pretty well. Fearful of loosing flexibility, I gave the UL a em based width - which I am still testing out. So far, it checks out OK in IE 5+, and the usual good browsers. I don't have acecss to IE Mac right now, so if anyone could run it by that stinker that would be awesome! I am pretty sure this will break in IE Mac in some strange way, but I am not 100% on that. Mac IE and floats... I don't know either, but I think you may be right :-) Why not just inline? http://here.locusmeus.com/temp/jono.html No widths needed. Tested only in IE5, 6, Firefox and Opera, but according to browsercam.com it works even in Mac IE. -- Els http://locusmeus.com/ http://locusoptimus.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 expanding box
Julie Angarone wrote:
http://web.princeton.edu/sites/Archaeology/rp/morgexhibit/morg1.html
The page shows the way I want it to in Firefox Opera, but not in
IE. Can anyone make a suggestion? I've tried the overflow:hidden on
the images's property (panelpic) and when it din't work I tried it
on bkdrop
Delete all those 'overflow: hidden'. They are not doing any good.
The end result will be a bunch of different web pages with sometimes
3 pics, sometimes 4 or 5, sometimes only one.
Here is one way to make it work in IE/win.
I'm using some 'reverse engineering - next to floats'[1] to make things
line up a bit better across browser-land, and then add in a bit of
'removed floats'[2] to make IE behave as if it understands just a little
bit of 'standard CSS'[3[4] despite its 'hasLayout'5] bugs.
.text2 {
width:400px; /* trigger 'Layout'[5] */
border:2px solid #22;
height:175px;
font-size:1.2em;
padding:10px;
padding-left:25px;
text-align:justify;
border:0px purple solid;
display: table; /* added for the good browsers[1] */
}
.panelpic {
margin-right:8px; /* changed for consistency */
margin-left:20px;
float:left;
margin-top: -25px;
margin-bottom: -150px; /* added for IE[2] */
clear:both;
border:0px solid white;
position: relative; /* added for IE[2] */
}
...note that there's no margin-left on '.text2'.
Negative 'margin-bottom' removes parts of the floats. Make sure that
negative margin is never set larger than the actual height of an image,
or else it may fail in most browsers because the entire image will be
seen as removed.
Adding 'position: relative' will affect layering in IE, and make the
overshooting parts of those images visible.
Hope that's close enough.
regards
Georg
[1]http://www.gunlaug.no/contents/wd_example_01_01.html
[2]http://www.gunlaug.no/contents/wd_demo_float_03.html
[3]http://www.w3.org/TR/CSS21/visuren.html#q15
[4]http://www.w3.org/Style/CSS/Test/float-margin
[5]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] An explanation..
I believe it's attempting to set a separate a width from ie5+, but it
will fail with ie7, which may be ok, because ie7 will get the box model
right.
http://css-discuss.incutio.com/?page=ChildHack
Regards
gh
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Michel
Sabatino
Sent: March 1, 2006 11:10 AM
To: CSS discuss
Subject: [css-d] An explanation..
Hi to all.
Here some code :
#content{
float:left;
width:540px;
text-align:left;
padding:20px;
background:#fff;
}
htmlbody #content{width:500px;}
Can somebody explain me briefly the last line : htmlbody #content Why
declare the width in this declaration and not above?
Thanks.
Regards.
Michel.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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
IE7b2 testing hub -- 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] Full height and fixed width col issue
I'd like a header, a left bar with a fixed width of 165 and 100% height,
a content area with width the remaining window width 100% and height
100% and a content footer (only on bottom of content, not the whole
bottom with the left bar).
With height 100% I'm having a problem with a vertical scrollbar
appearing for no reason and with width 100% on the content, it's going
to the next line instead of using 100%-165 to take up the full remaining
space. The content footer is also not going to the bottom.
This is frustrating...
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
body
head
titleUntitled Page/title
style
html,body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
#header {background-color: red}
#left {background-color: gray; width: 165px;}
#content {background-color: blue; width: 100%}
#footer {background-color: green}
DIV.clear
{
clear: both;
float: none;
height: 0px;
width: 0px; /* needed to prevent overflow expand on IFRAME shim hack
of RadMenu */
overflow: hidden;
}
/style
/head
body
div id=headerHeader/div
div id=left style=float: left; margin: 0px; padding: 0px;
height: 100%
div id=leftnavcontainer style=float: left;
div style=float: left
Some stuff in left
/div
div class=clear
/div
/div
div class=clear
/div
/div
div id=content style=float: left; height: 100%
div style=float: left
Content/div
div id=footer style=clear: both
Content only footer/div
/div
div class=clear
/div
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Content being pushed down
Simple problem, I'm sure. But not for me. Could you folks please look at this example pagehttp://www.mediumcool.com/test/test.htmland explain to me why the content in the right-hand column is being pushed downward by the content in the left-hand column? Thanks in advance for your help. -- Thanks, Tom Tom McNeer MediumCool http://www.mediumcool.com 530 Means St NW, Suite 110 Atlanta, GA 30318 404.589.0560 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] content div not aligning to top
I can't seem to get the center section of the page div id=content to align to the top of the space. I've been looking at this code all afternoon and cannot see what I am doing wrong. Any suggestions? http://www.hammersmith.ws/Census/tabbed/templateTabs.html Thanks, Carollynn __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Full height and fixed width col issue
Hi Alec,
Alec A. Lazarescu wrote:
I'd like a header, a left bar with a fixed width of 165 and 100% height,
a content area with width the remaining window width 100% and height
100% and a content footer (only on bottom of content, not the whole
bottom with the left bar).
I have a question for everyone wanting to know about creating 100% high
pages: why? Where has this fad come from? I'm just curious about the
100% high rabidness lately. :-)
With height 100% I'm having a problem with a vertical scrollbar
appearing for no reason
Oh, it's there for a reason. :-) You just don't understand the reason yet.
and with width 100% on the content, it's going
to the next line instead of using 100%-165 to take up the full remaining
space.
You haven't told anything to be 100%-165px.
I've added notes about a few of lines of your CSS and HTML that you are
not fully understanding. Hopefully this will get you on your way to a
100% high page.
html,body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
The height: 100% means make the html and body elements as high as the
viewport and never any higher/longer. You probably want a minimum
height of 100% instead.
#left {background-color: gray; width: 165px;}
If you want #left to be on the same line as #content, you need to tell
it to. Add float: left.
#content {background-color: blue; width: 100%}
You're telling #content to take up the whole viewport width and leave no
room for #left, so it has to sit on a line below #left, even once #left
is floated. Get rid of the width and add margin-left: 165px.
div id=left style=float: left; margin: 0px; padding: 0px;
height: 100%
Oh wait, you are floating #left. Why are you using inline styles, and
even worse, splitting styles between inline and embedded? Keep them all
embedded while developing, then move them to an external sheet. Much
easier for you and those of us trying to help you. :-)
The height here means make this div as tall as its parent and no
taller, no shorter. The parent is the body, which is as high as the
viewport, so the left div is going to be as high as the viewport -- even
if it begins very far down the viewport, or outside of the viewport
altogether. So if the header takes up space, and then a div comes after
it that is as high as the viewport, you will get a vertical scrollbar.
div id=content style=float: left; height: 100%
If you're going to float #content too, ignore what I said earlier about
giving this div a left margin. But do get rid of its width: 100%
declaration.
Same comments about 100% height apply to this div.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Content being pushed down
Tom McNeer wrote:
Simple problem, I'm sure. But not for me.
Could you folks please look at this example
pagehttp://www.mediumcool.com/test/test.htmland explain to me
why
the content in the right-hand column is being pushed
downward by the content in the left-hand column?
First of all, there's a syntax error in your styles, which causes
the right column to overlap the left one.
#rightCol {
margin: 0 px auto;
should be margin:0px auto;
Changing that, sets the right column further to the right, in IE
without being able to reach it by means of a scrollbar.
You set a min-height of 200px, but IE doesn't recognize
min-height, so the right column isn't as high as should be.
You have a wrapper of 780px wide, inside you have a div of 565px
wide plus left padding of 10px, which you float:left, *and* give
position:relative, and then you have a right column div, which
you give position:relative and left:580px, which means 580px to
the right from where it would sit if it hadn't position:relative.
And because of your margin: 0px auto;, this is in the middle of
the page, below the left column. The combination of your styles,
makes the right column sit vertically below the left column, and
horizontally 580px to the right of the middle.
To find out which styles have to be eliminated, it would help to
know what the desired result is :-)
--
Els
http://locusmeus.com/
http://locusoptimus.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] An explanation..
Christian Heilmann wrote: I beg to differ, there is nothing old or IE centric about this approach. You simply define something for a browser that does not understand the child selector and override/enhance it for those that do. That is nothing hacky or bad, it is simply the CSS equivalent of object detection in JavaScript. I agree. Maybe not as brief an explanation as mine, but seems to say the same and a bit more (unless my Norwenglish is letting me down, which happens at times). It will also not not work in IE7 but hopefully WILL also work for MSIE 7, as this one does understand the selector. That was the whole point in that part of my response, as it seems like we'll have to use another method, 'hack' or 'graceful degradation' for keeping 'element-dimensions' out of IE7's sight. Or else we will trigger the 'Layout' bug that the IE-team won't fix in time for IE7-final - according to members from that team. Oh, well... not much of a problem, really. Plenty of selectors in CSS3. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Need some help with IE box hack
On Feb 28, 2006, at 9:03 PM, Don - HtmlFixIt.com wrote: Dominique wrote: Hi all, I am building a website for a friend's company and I need some expert eyes to look at my implementation of the box model hack (I used technique 3 of http://css-discuss.incutio.com/? page=BoxModelHack). I check on my XP laptop running IE6 and that did not seem to do anything. As a test I only implemented it for the content div, not for sidebar. Live test website at: http://dreamweaver.pulpkittens.info Hi Dominique, I expanded text size in ff and ie6 and our divs outrun the bottom of your page. You need to work some clears in. The footer does a clear: both;. I think the reason text overflows the footer is the fact that I set a width and height because of the background for #content. Is there a way to set a minimum height? That would be the ideal solution. I was also thinking that if I had a big enough image that would reveal more of itself when text size increases, that would be fine too. As long I as I could specify height to display at least a given amount (I want the embedded name to display). Any suggestions for that would be appreciated. As an update, after rebooting my XP laptop, the hack seems to have taken effect, except for the fact that the calculations seem to be 1 pixel off for IE6. Don't really understand this. Total width is supposed to be 821 pixels with 555 for #content and 266 for #sidebar. For #content I end up with 409 pixels (exact math). For IE6 however I need to go down to 408 px to get the sidebar to float correctly. Is this a known issue? Dominique. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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:hover padding different on img and text
I don't know how to clearly explain this, i think the example will
explain it better. Anyway, this happens on firefox and the part of the
css which mess it i think is this one
a:link {
color: #b2d1f6;
}
a:visited {
color:#496280;
}
a:hover {
border:1px solid #094a98;
color:#094a98;
background: #b2d1f6;
padding:0.2em;
}
a:link img {
border:1px solid black;
height: auto;
width:auto;
}
a:visited img {
border:1px solid #001b3c;
height: auto;
width:auto;
}
a:hover img {
border:1px solid #7eb9ff;
padding: 0;
height: auto;
width:auto;
}
The pages where it happens can be seen on
http://www.synthetic-effulgence.com/art/index.php to see an example of
what happen when I hover a link that is an image and on
http://www.synthetic-effulgence.com/links/index.php to see what it's
like a link with text on it.
Now the css above was thought to give the effect that it's right to
appear and that actually appear on the text, but on the a:hover img i
re-set the padding to 0 because when I took the padding off from a:hover
it displayed the right way on the img, just with a border, but then
again if I did so the padding wouldn.'t have shown on the text either.
Point is, even if on a:hover img I set the padding on 0, it doens't
really work. and I can't understand why, and i can't think of a
workaround to get the text links like they show now, but the img links
just with a border,without that horrible square beneath them
If anyone understood what I said, and know a way to help me could you
please let me know?
thanks a lot in advance
*Alisha*
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] content div not aligning to top
[EMAIL PROTECTED] wrote:
I can't seem to get the center section of the page div
id=content to align to the top of the space.
http://www.hammersmith.ws/Census/tabbed/templateTabs.html
Add...
#outer, #content {float: left;}
...and it'll end up in the right place.
It is a float-layout, so 'content' must float alongside 'left'. Floating
it will also keep clearers from acting on elements outside 'content',
which is just as important in your layout.
Defining 'outer' as a float also, will make it expand to contain all the
other floats inside.
Also, add...
#left ul, #news {position: relative;}
...to make IE/win render those backgrounds properly.
Tested in IE6, Opera 9tp2 and Firefox 1.5.0.1.
There's a weak spot is your use of left and right 'border-color' as the
only background for those side-columns. That'll make them less visible
if accessibility-option 'ignore colors' is used in IE/win, as borders
will then turn black - the same color as ordinary text on top of them.
I use a similar border-background for many layouts, and avoid this
problem by setting background-color on the actual side-column containers
also. Background-color will turn white and make the content very visible
for those who might need to use such an option.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Content being pushed down
Hi Els, Thank you for your very complete explanation. Aside from the syntax errors, and the fact that I should have stated that I hadn't attempted to make any adjustments for IE yet, perhaps it would be clearer if (as you suggest), I explain my intent. Actually, the page as it is displayed (which isn't the entire page, just a partial) looks just the way I want it to (in Firefox), except for the fact that the content in the right-hand column is being pushed down. So perhaps you can help me understand how to achieve that effect in a proper manner. Also -- On 3/1/06, Els [EMAIL PROTECTED] wrote: The combination of your styles, makes the right column sit vertically below the left column, and horizontally 580px to the right of the middle. I understand what you're saying about the horizontal position, but -- the right column isn't really sitting vertically below the left column (at least not in Firefox). Only its content is. The top of the div is precisely where I'd like it to be, as indicated by the tiled brown background. But the content within is being pushed downward as content is added to the left column. That's the part that mystifies me. Thanks in advance for your help. -- Thanks, Tom Tom McNeer MediumCool http://www.mediumcool.com 530 Means St NW, Suite 110 Atlanta, GA 30318 404.589.0560 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Content being pushed down
Tom McNeer wrote: Hi Els, Thank you for your very complete explanation. Aside from the syntax errors, and the fact that I should have stated that I hadn't attempted to make any adjustments for IE yet, perhaps it would be clearer if (as you suggest), I explain my intent. Actually, the page as it is displayed (which isn't the entire page, just a partial) looks just the way I want it to (in Firefox), except for the fact that the content in the right-hand column is being pushed down. So perhaps you can help me understand how to achieve that effect in a proper manner. Here's my version: http://here.locusmeus.com/temp/tom.html No adjustments needed for IE. I commented the rules that may need explanation. Some things you will notice: I changed the doctype to Strict, which will throw IE in standards mode. Personally, I find that much easier to work with than quirksmode, since I never got round to study IE's quirks ;-) I haven't set any height. The 100% height you had for #wrapper, didn't do anything, as this states 100% height of the parent. But the parent is body, which didn't have a height either. So, if I would give body and html a 100% height, then 100% on the wrapper would make it as high as your window. But you want it 123px from the top, so it will also extend 123px below the bottom of the window. Doubt you want that :-) So, the way it works now, is that the more content you write in either leftCol or rightCol, the higher #wrapper becomes. This is actually the preferred way of building webpages (imo of course). If you set a fixed height, all sorts of bad looking stuff happens when people enlarge the font. Either boxes need scrolling (ugly and very uncomfortable if the box is higher than one's window), or things start overlapping or being cut off. Not good either :-) -- Els http://locusmeus.com/ http://locusoptimus.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 crash on Windows XP
Hi, I'm hoping that someone has seen this before. The url in question is http://www.bookers-world.co.uk In IE, when adding an item to the cart, the cart page completely crashes IE. (only when something is in the cart, an empty cart doesn't cause the problem) - the problem appears to be a table inside a div which is floated to the right, with a width of 580px. If I take the entire table out, the page renders fine (albeit with no cart contents) - if i put JUST the table tag with no children in, IE crashes. I'd appreciate any suggestions. Thanks James __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Applying basic CSS to form item
Some references: http://www.d.umn.edu/goto/css#forms Laura ___ Laura L. Carlson Information Technology Systems and Services University of Minnesota Duluth Duluth, MN 55812-3009 http://www.d.umn.edu/goto/webdesign/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 crash on Windows XP
James, I'd start by fixing these: line 1 column 1 - Warning: missing !DOCTYPE declaration line 49 column 15 - Warning: missing /a before div line 49 column 217 - Warning: discarding unexpected /a line 67 column 1 - Warning: discarding unexpected /table Best, -Nigel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 crash on Windows XP
Hi Nigel, The !doctype is there, I temporarily got rid of it to force IE into quirks mode. I'm still playing with it! I'll check those other things and fix them Cheers James Duckworth, Nigel wrote: James, I'd start by fixing these: line 1 column 1 - Warning: missing !DOCTYPE declaration line 49 column 15 - Warning: missing /a before div line 49 column 217 - Warning: discarding unexpected /a line 67 column 1 - Warning: discarding unexpected /table Best, -Nigel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 IE7b2 testing hub -- 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:hover padding different on img and text
On Mar 2, 2006, at 6:41 AM, Alisha wrote:
I don't know how to clearly explain this, i think the example will
explain it better. Anyway, this happens on firefox and the part of the
css which mess it i think is this one
And happens on other browsers as well...
[...]
The pages where it happens can be seen on
http://www.synthetic-effulgence.com/art/index.php to see an example of
what happen when I hover a link that is an image and on
http://www.synthetic-effulgence.com/links/index.php to see what it's
like a link with text on it.
Now the css above was thought to give the effect that it's right to
appear and that actually appear on the text, but on the a:hover img i
re-set the padding to 0 because when I took the padding off from
a:hover
it displayed the right way on the img, just with a border, but then
again if I did so the padding wouldn.'t have shown on the text either.
Point is, even if on a:hover img I set the padding on 0, it doens't
really work. and I can't understand why, and i can't think of a
workaround to get the text links like they show now, but the img links
just with a border,without that horrible square beneath them
It is not working the way you expect it to work.
The image is wrapped in a a tag, basic syntax is aimg //a.
What your css does is adding padding on hover to the block created by
the a tag. It is *not* adding any padding to the image block.
a:hover {
border:1px solid #094a98;
color:#094a98;
background: #b2d1f6;
padding:0.2em;
}
Now, this:
a:hover img {
border:1px solid #7eb9ff;
padding: 0;
height: auto;
width:auto;
only controls the padding on the image, but doesn't affect the
padding on the a in any way.
The selector a:hover img translates as an img / that is child of a
a.
It does not translates as 'when the a contains an img', do
something. That is not the way css works.
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Nesting divs problem in Mozilla, fine in Explorer
http://www.5finger.com/css/bottom_mozilla.html (styles embedded in source) If you look at this in Explorer, it appears as it should, note the dark gray left/right/bottom sides in the white area under the black section designated nav. There should be no top gray in that white area. If you open it in Mozilla, the bottom gray doesn't appear, but the left/right does. Anyone know how to fix this? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Nesting divs problem in Mozilla, fine in Explorer
-BEGIN PGP SIGNED MESSAGE- Hash: SHA1 There a good reason you're doing what amounts to a border effect without using any border properties? Magenta Placenta wrote: http://www.5finger.com/css/bottom_mozilla.html (styles embedded in source) - -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.html -BEGIN PGP SIGNATURE- Version: GnuPG v1.4.2 (GNU/Linux) Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org iD8DBQFEBsoewWrjHBui99cRArliAJ45q5UWnxXx2VBh7JBQC3NJhtQCRwCfYSFW Vmk+2ODHS1T4mcBZFDoCq8s= =71WT -END PGP SIGNATURE- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] An explanation..
On 01/03/06, Michel Sabatino [EMAIL PROTECTED] wrote:
#content{
width:540px;
padding:20px;
}
htmlbody #content{width:500px;}
Can somebody explain me briefly the last line : htmlbody #content
Why declare the width in this declaration and not above?
Internet Explorer can't cope with child selectors, so the latter
declaration only gets seen by browsers which don't (incorrectly) put
the 40px of padding inside the width (which IE does in Quirks mode).
It isn't a recomended solution as IE7 will require a fair bit of
running around once we know which hacks to hide things from its parser
still work, and which bugs are still present. Conditional comments are
likely to be a better bet.
--
David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/
