[css-d] IE blew up my layout
I'm working on this layout. It looks satisfactory in FF and Opera, but when I checked IE it blew it asunder. Here is a mockup: HTML: http://www.twilighted.com/tx/mockup.html CSS: http://www.twilighted.com/tx/mockup.css The three boxes aren't positioned well enough to make IE happy. I'll admit I did kind of ghetto-rig it. It seems like such a simple thing, but I haven't had any success. Thanks cssexperts! __ 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] Vertical Centering
I recall someone posting a very easy method of vertical centering a block in a viewport a while back. Seemed straight forward - positioning with percentages and a little negative margin nudging. Googled but came up empty. Can anyone point me to this? How cross-browser is it? Here's another for the record: http://www.wpdfd.com/editorial/thebox/deadcentre4.html I tried it in a bunch of browsers a few weeks ago. It worked in more than I expected. As far as I remember, it worked in IE 5+, Opera 8+, and Firefox. No NN4 though. Not sure about Mac browsers. Kudos. -- Michael Clayton www.twilighted.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] Rounded corners and Transparent GIFs
For my next trick, I'll need a div with rounded corners on top of a textured background. Any volunteers from the audience? My launch pad was this ALA article: http://www.alistapart.com/articles/customcorners/ I was skeptical about this being possible at all, but here is my stubborn progress: http://www.twilighted.com/tx/giftest.html The div must be elastic horizontally and vertically. The problem is that the when the corner images overlap, the transparent corners are blocked out, leaving a rectangular corner. Try shrinking the text and watching what happens to the bottom left corner. Here is a shortcut to the ALA article's explanation of how the images are sliced: http://www.alistapart.com/d/customcorners/step1.1.html This would be very easy to arrange with tables, but that would be embarassing. I've been trying to place one horizontal and one veritcal box with white backgrounds behind the main div, but have been so far unsuccessful. Here's a quick mockup: http://www.twilighted.com/tx/theory_example.jpg I just want a nice clean box with rounded, transparent corners. All that I have found so far has been pain! -- Michael Clayton www.twilighted.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] Rounded corners and Transparent GIFs
Chris: Thanks, I will investigate that book next time I'm near a book store. Jim: The javascript option is interesting, but I tend to shy away from anything that requires javascript to navigate or display correctly. Just use these methods and skip the images entirely: http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm Your page is badly broken in ff even in it's current form. There are gaps all over the place in your background and no lower right corner rounding. Thanks Don, I think that is exactly what I was looking for. I had seen that site before, but couldn't locate it again. You saved the day. I know the page is broken, though, that's what my post was about. -- Michael Clayton www.twilighted.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] How to limit table cell height (GMail style)
So my question is: How is this solved in for instance GMail where content i
only one line high (and additional overflowing content is hidden). Please
share your thoughts on this, and if you could point me to any information on
how to solve this.
I've run into similar problems, and my solution has been to put a div
inside the td
.cell-height {
height: 10px;
overflow: hidden; /* Or whatever you desire */
}
td
div class=cell-heightStuffs here/div
/td
While td's don't seem to respond to height, divs do, so the td will
only expand enough to fit the div. I'm not sure how GMail does it,
but this has worked for me in the past. Hope it helps. :)
--
Michael Clayton
www.twilighted.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] Q: variable image in DIV with some text on top. Possible?
(Clicking reply in Gmail defaults to the user's email address, and not
[EMAIL PROTECTED] Anyone know a way to fix this? I accidently
sent this to Angel directly.)
That should be possible by setting the margin-top of the image to a
negative number, which would slide it under the text. You may have to set
the z-indeces of the text to a higher number than the image if the image
overlaps the text in that case.
Alternatively, you could forego the img tag completely and instead use a
background image as follows
.rand-img-box {
background: top left no-repeat url(random_image.jpg);
}
div class=rand-img-box
Text describing image
/div
If you go that way you will run into problems with height and width of the
box. If I remember correctly, PHP is capable of reading the height and
width of an image, so you could fix that fairly easily. It's been a very
long time since I've done PHP, and I don't know any of the image functions,
but here is the getimagesize() function for your pleasure.
http://us2.php.net/manual/en/function.getimagesize.php
Hope that helps, and good luck!
--
Michael Clayton
www.twilighted.com
On 3/8/06, Angel Outon [EMAIL PROTECTED] wrote:
Hi.
I like to ask anyone of you to see if this is possible and some advise
for it.
I have a banner made by a div and has an variable image to display. This
is done using this script: http://www.bezveze.com/skripte/rid/
Something like this
div
p class=sloganSome text over the image/p
?php include(random/rid.php); ? !-- here is the random image --
/div
I like to have the text Some text over the image to be displayed on
top of the random image.
Is this possible?
Thanks for your advise,
regards,
Angel
__
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/
--
Michael Clayton
www.twilighted.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 footer problem
Though peace now reigns in IExplorerville, danger is brewing in Netscapia. The same problem --but probably with a different cause-- is occuring in NN 6.0 and NN 6.01. It doesn't impair accessability at all, so normally I wouldn't worry too much about it. Unfortunately it is concealing the Copyright notice, a fatal flaw. http://www.twilighted.com/ntc/index2.html - This is the fixed version of the page, which works in all browsers I have tested except for the regrettable bug in NN 6.0 and NN 6.01. If you don't have these versions of NN and want them, you can dig them up at http://browsers.evolt.org/ I don't expect anyone to go to all that trouble on my account, but they're there if you want 'em. :) -- Michael Clayton www.twilighted.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] Simple CSS Question?
Hi Daniel, I've had similar problems with IE, but have never been able to find a solution. It may be a comfort that most users probably won't have a viewport smaller than 800x600. Sorry I couldn't be more help. Hopefully one of the wise souls on this list will be able to sort out this mystery. -- Michael Clayton www.twilighted.com On 3/7/06, Daniel Patterson [EMAIL PROTECTED] wrote: Hey there, I'm new. Could somebody check out http://www.shopperschoice.com/ for me. The problem I'm having is that the page jumps down to the bottom when you resize below 800x600 in Internet Explorer. Please check out the CSS and let me know what I'm doing wrong here, thanks! Daniel Patterson __ 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] IE footer problem - nct-res
Thanks, I wasn't aware that NN 6.x were betas. I'll stop fretting now. Yesterday I went a bit insane and downloaded 20+ old browsers. My thinking was this, It will be awesome if I can make my sites work in everything. The odds of anyone using an old Netscape are about as good as the odds of my head quantum tunneling through my desk as I bang it in frusteration. But there's always a chance. As for the font sizes, I'm still working off this old ALA article. It's two years old now, though. http://www.alistapart.com/articles/elastic/ Is pt now preferred over ems? I've not stayed in the loop as much as I should have. The advantage I see of ems with a 90~% font size is that the text is readable at any IE size, from smallest to largest. With ems, but without 90% font size in place, the actual size change from smallest to largest is far too drastic. Smallest becomes impossibly small, and largest is so big that it breaks the layout. 90% font size makes the users' size changes significant, but not extreme. In IE, pt seems to have the same problem as px, it cannot be resized by the user. I would be happy to learn a better method, of course. -- Michael Clayton www.twilighted.com On 3/8/06, Felix Miata [EMAIL PROTECTED] almost certainly wrote: Do your browser stats actually show a material number of people using those insecure, buggy, slow, old, beta browser versions? They need a good hard push to upgrading to secure non-beta software. All Netscape 6.x versions are betaware. Security issues alone rule out safely using all Netscapes except the newest 8.whatever, and even that may be a risk, since Netscape isn't too quick to implement the security fixes implemented in Mozilla Project CVS. Different subject: Why don't you want users by default seeing their choices of the font sizes and families that work best for them? http://mrmazda.no-ip.com/SS/michac1.jpg http://mrmazda.no-ip.com/tmp/showcased.html -- Blessed are they whose ways are blameless, who walk according to the law of the Lord.Psalm 119:11 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/auth/auth __ 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 footer problem
I nabbed this layout from the famous http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml My current progress is here: http://www.twilighted.com/ntc/ In IE 6, the footer is only pushed down by the left and right columns, but not the center column. This can be fixed by resizing the window, but the initial load is bugged. This bug is mentioned in the source code, sort of: CSS HACK: position:relative needed by IE6 otherwise the header and col 2 don't show up on initial rendering - they're there but you have to minimise the window or switch to another app and back to see the full effect. But IE5(pc) doesn't like it. And nor does NN4. NB. the use of pos:rel has to go way beyond skin-deep - any nested element that needs a background colour appears to require to be be relatively positioned That's not exactly the same bug I'm seeing, but it's similar. I've tried adding everything with a background color to the pos:rel list, but it hasn't helped. I've also tried removing the background color from everything, but that hasn't helped either. Another slightly more minor bug is that when the window is shrunk, IE 6 pushed the navs to the bottom of the page. Any advice for either problem? Thanks for any help. :) -- Michael Clayton www.twilighted.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 footer problem
I discovered that the following code is what breaks the site in IE.
ul.nav {
list-style: url(bullet_small.jpg);
line-height: 1.5em;
margin-left: 18px;
padding: 0;
}
The list-style specifically is what kills it. Does anyone know why applying
a bullet image mucks up IE? I guess that's a dumb question. ;) Does anyone
know how to get around it? For now I'll just apply a background image, I
guess.
--
Michael Clayton
www.twilighted.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/
