Re: [css-d] Reduce space above characters?
On Fri, May 16, 2008 at 12:15 AM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Michael B Allen wrote:
Is there any way to reduce the space above characters. Consider the
following:
http://www.ioplex.com/~miallen/t14.html
Setting line-height: 0.5; has no effect on the space above Apples.
There's at least 4 whole pixels above the A and l in this example. Is
there any way to reduce that?
For a valid construction - yes.
However, if you want to only reduce the space _above_ characters -
visually - then you may have to tune line-height and use offset...
http://www.gunlaug.no/tos/alien/mba/test_08_0515.html
Yes, the position: relative; top: -1px; is doing what I want.
div.up1 {
position: relative;
top: -1px;
}
a href=xdiv class=up1Oranges/div/a
But in hindsight it only looks strange in FF whereas in IE and Safari
everything looks normal without it. So I think I'll just leave it out.
But still a good thing to know.
Thanks,
Mike
--
Michael B Allen
PHP Active Directory SPNEGO SSO
http://www.ioplex.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Vertical menu, Thanks
Thanks to Alan and Tedd for the help I solved the problem, by looking at the source. I've had the source-code printed to a PDF-file, and then copy - pasted the source-code to a real file. But some non-wanted text, had mixed in, and when I deleted this it solved my problem. So, be careful when you make a copy - paste !!! -- Regards / Mhv. Ib K. jensen __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Last-minute question
Richard Grevers wrote:
I just remembered that I had to reapply min/Max width expressions for
the 3 container elements of a website and I discovered that IE6 is
doing strange things with the companion column as a result (On a
window wider than 1440px it extends the white background of the
content colum to the left by the same amount as the space to the
right of the globalwrapper.
http://www.vine.org.nz/index.php/test-page
You have problems with a series of IE6 bugs in that test page, so I
guess the live pages show similar problems.
1: the 'italic bug'[1] acts on main content and overall width, but of
course not on the #pedestal. You have to fix or avoid that italic bug,
or else there will intermittently pop up a horizontal scroll-bar when
italic text hits IE6.
2: the first declared font-size is in 'em', so you're triggering the 'em
font-resizing bug in IE5 - 7'[2]. That means the min-width in em part
of your expression is off by a mile if font-resizing is anything but
normal / medium.
Adding...
#globalwrapper { font-size: 100%;}
...will repair that.
3: the max-attack-value in the expression must be larger than
max-result-value, so the width of the space to the right of
#globalwrapper is accounted for.
4: #globalwrapper has to be extended to include all other containers, or
else IE6 will tend to render them out of sync because of its many bugs
- most seriously the 'italic bug' and the 'auto-expansion bug'.
This means moving the end-tag for #globalwrapper down to /body in the
markup, which I hope is possible for the live pages also.
Working example: http://www.gunlaug.no/tos/alien/rg/test_08_0516.html
regards
Georg
[1]http://www.positioniseverything.net/explorer/italicbug-ie.html
[2]http://www.gunlaug.no/contents/wd_additions_13.html
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Specificity?
I've just solved a problem on a page, but I don't understand why the
solution works, and that bugs me, so I wonder if someone kind could
fill in the blanks for me?
Page in question: http://www.sandbox.sharkattack.co.uk/tempo/index.php
In the CSS, starting around line 331, I had the following:
#sidebar {
font-size: 0.8em;
line-height: 1.5;
}
#sidebar p {
margin-bottom: 1em;
}
For some reason that I can't fathom, the first rule wouldn't take at
all. Adding an !important declaration to the #sidebar rule made no
difference. The CSS validator (via Web Dev Toolbar) gave the error:
Parse error - Unrecognized */ #sidebar { font-size: 0.8em; line-
height: 1.5; }
...I wasn't sure what to make of that. The solution, it turned out
(after banging my head against it for way too long) was to swap the
two rule around, thus:
#sidebar p {
margin-bottom: 1em;
}
#sidebar {
font-size: 0.8em;
line-height: 1.5;
}
It worked, but I'll darned if I can see why. Presumably it's a
specificity issue, but the declaration properties for the two rules
don't conflict, so I can't see why one should interfere with the other.
Obviously I'm missing something, but could someone shed some light so
I don't run aground on this reef again?
Thanks;
--
Rick Lecoat
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Specificity?
On 16 May 2008, at 15:00, Rick Lecoat wrote: I've just solved a problem on a page, but I don't understand why the solution works, and that bugs me, so I wonder if someone kind could fill in the blanks for me? Hold up, I just found the culprit: a left over comment-closer (*/). Dang, and I held off posting this to the list for ages because I was sure I'd find it. As soon as I caved... blammo. Staring me right in the face. Case closed. -- Rick Lecoat __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Specificity?
* Rick Lecoat wrote:
I've just solved a problem on a page, but I don't understand why the
solution works, and that bugs me, so I wonder if someone kind could
fill in the blanks for me?
Page in question: http://www.sandbox.sharkattack.co.uk/tempo/index.php
Parse error - Unrecognized */ #sidebar { font-size: 0.8em; line-
height: 1.5; }
Yes, you have a */ immediately preceding the SIDEBAR section. Since
there is no comment open at that point, the two characters are handled
as if they are part of the next selector, and
* / #sidebar { ... }
is not a valid selector at the moment. If you remove the */ the sheet
should validate and both rules should work.
--
Björn Höhrmann · mailto:[EMAIL PROTECTED] · http://bjoern.hoehrmann.de
Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de
68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] box model difference between IE and Mozilla
Hello all,
I have an issue with the box model difference between IE and Mozilla.
On Mozilla the padding is added to the width and in IE it is not, as the
included example shows. With Mozilla the two boxes meet to make a flush
corner, IE leaves a gap.
Is there a way around this so I can get the same result on all modern
browsers?
Thanks.
html
head
titlebox model test/title
style type=text/css
.pageHeading
{
position: absolute;
top: 5px;
left: 5px;
width: 605px;
height: 25px;
padding: 0px 0px 0px 10px;
background-color: #ff;
}
.rightSidePromos
{
position: absolute;
top: 5px;
left: 620px;
width: 10px;
height: 100px;
background-color: #ff;
}
/style
/head
body
div class=pageHeading/div
div class=rightSidePromos/div
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Last-minute question
Gunlaug Sørtun wrote: Working example: http://www.gunlaug.no/tos/alien/rg/test_08_0516.html Discard the entire thing. Impossible to make all those wrappers work properly together on top of your stylesheets. I give up on it. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] box model difference between IE and Mozilla
On 2008/05/16 16:08 (GMT+0100) Lee Bettridge apparently typed: I have an issue with the box model difference between IE and Mozilla. On Mozilla the padding is added to the width and in IE it is not, as the included example shows. With Mozilla the two boxes meet to make a flush corner, IE leaves a gap. Is there a way around this so I can get the same result on all modern browsers? html head titlebox model test/title Lack of a doctype puts the browsers in quirks rendering mode, which causes IE to use its native non-standard box model. Give IE a modern doctype to make it conform much better to the standards box model. http://css-discuss.incutio.com/?page=DoctypeSwitch -- . . . . in everything, do to others what you would have them do to you . . . . Matthew 7:12 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] box model difference between IE and Mozilla
On 5/16/08, Lee Bettridge [EMAIL PROTECTED] wrote: I have an issue with the box model difference between IE and Mozilla. On Mozilla the padding is added to the width and in IE it is not, as the included example shows. With Mozilla the two boxes meet to make a flush corner, IE leaves a gap. Is there a way around this so I can get the same result on all modern browsers? have you put IE into standards mode, or is it in quirks mode? if you're not sure, can you give us either a link to your site (preferred) or your doctype line? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] box model difference between IE and Mozilla
On 16 May 2008, at 16:08, Lee Bettridge wrote: Hello all, I have an issue with the box model difference between IE and Mozilla. On Mozilla the padding is added to the width and in IE it is not, as the included example shows. With Mozilla the two boxes meet to make a flush corner, IE leaves a gap. Is there a way around this so I can get the same result on all modern browsers? Thanks. Lee, the most reliable way I've found is to simply avoid setting left/ right padding on any element with a declared width. Instead, set left/ right margins on the elements contained within. As others have said, get the page into Standards mode if you can, with a fully formed doctype. -- Rick Lecoat __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] box model difference between IE and Mozilla
Lee Bettridge wrote:
Hello all,
I have an issue with the box model difference between IE and Mozilla.
On Mozilla the padding is added to the width and in IE it is not, as the
included example shows. With Mozilla the two boxes meet to make a flush
corner, IE leaves a gap.
Is there a way around this so I can get the same result on all modern
browsers?
Thanks.
If you are running IE/6 and down in quirksmode (as I often do /on purpose/):
?xml version=1.0 encoding=utf-8?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
The correction is:
* html .pageHeading {width: 615px;}
Deleting the xml above the doctype puts it in standards mode-- in which
case, no correction for IE is needed.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Nested div break in IE7
Dear all, I have been a subscriber to the css-d list for a long while and always found it an interesting read. I'm not a web pro, my background for a while was a tester on a large travel website, so I have a fair-ish idea of things. I'm building a site at the moment as per below url: http://beta.bedazzled.name It looks fine in FF and Opera, a little broken in Konqueror and completely broken in IE7. I use Linux and I don't have IE7 at home (though I am looking at installing ies4linux), but I've had a look at work. It should look like the below mockup I built: http://beta.bedazzled.name/mockup/mockup.png The main background for the body is a tiled 1px image, as are backgrounds for both nested div's, if there is another way of doing it to avoid this any suggestions would be appreciated. Thanks Daniel -- We are not now that strength which in old days moved earth and heaven; that which we are, we are; One equal temper of heroic hearts, Made weak by time and fate, but strong in will To strive, to seek, to find, and not to yield. --- *Tennyson's Ulysses* cybertron.danielbotting.co.uk - my blog http://cybertron.danielbotting.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] box model difference between IE and Mozilla
On 16 May 2008, at 16:08, Lee Bettridge wrote: Hello all, I have an issue with the box model difference between IE and Mozilla. On Mozilla the padding is added to the width and in IE it is not, as the included example shows. With Mozilla the two boxes meet to make a flush corner, IE leaves a gap. [...] On Fri, 16 May 2008 16:41:41 +0100, Rick Lecoat replied: Lee, the most reliable way I've found is to simply avoid setting left/ right padding on any element with a declared width. Instead, set left/ right margins on the elements contained within. As others have said, get the page into Standards mode if you can, with a fully formed doctype. I agree with Rick here. While a suitable DOCTYPE will put IE 6 and 7 into so-called standards mode, if your visitor comes from Google's cached version of your page they will see it in quirks mode anyway. Possibly one reason that Georg regularly uses the XML declaration to trigger quirks mode at all times. (?) Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
