Re: [css-d] Stopping IE6 and 7 clearing a float
Ar 17/06/11 06:03, ysgrifennodd Alan Gresley:
Yes, override them with specificity in style.css.
div#site-title {
float: none;
width: auto;
}
div#branding {
width: auto;
}
Ah yes. Sorry, I was being more than a little slow there.
I guess you don't quite understand hasLayout. It's like mixing the
poison and the antidote together. May I suggest to you that you read
this.
http://www.satzansatz.de/cssd/onhavinglayout.html
You're absolutely right. I've tried. Honestly I have, but it's been
beyond me so far. I'll give it another go, though. I owe you that much.
:-)
You could make the changes in the parent stylesheet and insert this.
/* WARNING, beware of the hasLayout genie.
http://www.satzansatz.de/cssd/onhavinglayout.html */
Could be the answer!
Cheers and thanks again.
Peter
--
http://www.peredur.net
pere...@peredur.net
__
css-discuss [css-d@lists.css-discuss.org]
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] Stopping IE6 and 7 clearing a float
Hi,
I'm developing a WordPress site:
http://www.stellawhitelaw.co.uk
In every browser I tested except IE6 and 7, the image on the left floats
left and is not cleared until the main navigation menu. In IE6/7, the
div holding the site title clears the floated image. I'm not actually
sure which div it is that is doing the clearing. I think it could
either be div#masthead or div#branding.
I googled a bit and found a suggestion to add this to the styles:
* {
zoom: 1.0;
}
It didn't change anything, though. Beyond that, my Google-foo let me down.
Could someone please put me on the right track?
It's HTML5 (from the parent WordPress theme) and there are a number
'rel' attribute values that appear to be invalid. I don't think that
these are causing the problem, though, because I've used the same parent
theme before and it's worked OK in IE6/7: although I stand to be
corrected on this since I've only just started looking at HTML5.
Thanks
Peter
--
http://www.peredur.net
pere...@peredur.net
__
css-discuss [css-d@lists.css-discuss.org]
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] Stopping IE6 and 7 clearing a float
Ar 16/06/11 17:35, ysgrifennodd David Hucklesby:
In your style-sheets, you have these Layout triggers that affect
#site-title -
style.css line 12:
* {
zoom: 1.0;
}
style.css line 21:
#site-title {
width: 500px;
}
style-1.css line 341:
#site-title {
float: left;
width: 700px;
}
You also have hasLayout on the enclosing #branding:
#access .menu-header,
div.menu,
#colophon,
#branding, /* - here */
#main,
#wrapper {
width: 940px;
}
Getting rid of all those triggers fixes it this end.
Thanks David,
First the good news. Your solution works, as you know it does, as you
can see if you visit http://www.stellawhitelaw.co.uk
I have a bit of a problem with it, though. I can get rid of the
triggers in the CSS file you've called style.css with no problem (in
fact I probably should have do so before), but those in style-1.css are
not strictly speaking accessible to me. The reason is that I'm
developing a WordPress child theme, so I import the parent stylesheet
(@import) and then do whatever I need to in my child theme to make it
work. The last two triggers you give above are in the parent stylesheet.
Now, OK, I can alter the parent stylesheet; but it comes with a risk. A
future update to the parent might put the triggers back and break the
layout. So is there a way I can prevent HasLayout being triggered
without messing with the parent stylesheet?
As for being a glutton for punishment, I'm not sure why you think that,
but I'll take it as a compliment.
:-)
Peter
--
http://www.peredur.net
pere...@peredur.net
__
css-discuss [css-d@lists.css-discuss.org]
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] IE6 and 7 help please
Happy New Year to the list. I'm just starting on the development of a site for an authoress and have hit a problem in IE6 and 7 with the main navigation list. You can see the page I'm working on at: http://www.peredur.net/stella/template.php The page is valid according to the w3c validator and renders correctly in everything I've tried (FF, Opera, Chrome, IE8) except for IE6 and 7. IE6 isn't respecting the padding given to the links. IE7 isn't displaying the menu at all! I've never met this one before, so I'm at a bit of a loss. Does it ring a bell with anyone who could let me know what I have to do to get it to render properly---or at least reasonably---in the problem browsers? Thanks in advance. Cheers Peredur -- peredur.net http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] IE6 and 7 help please
On 01/01/11 15:30, Chetan Crasta wrote:
ul#topnavlist li a {position:relative}
That is the hack that will fix the problem.
BTW, your page is not valid. The Crime, Cats etc sub-menu should be
within anli.
~Chetan
Aargh! That'll teach me one of two things. Either to stop fiddling
when other people are going to check the code or, if I have to fiddle,
to at least revalidate the page before putting it up. My apologies for
that.
As for the hack: works like a dream. Another one for the little black
book of handy IE hacks. Many thanks.
Now I just have to sort out why IE7 and only IE7 seems to be having a
problem with the placeholder image. It's never straightforward, is it.
Many thanks, Chetan.
Cheers
Peredur
--
peredur.net http://www.peredur.net
__
css-discuss [cs...@lists.css-discuss.org]
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] IE6 and 7 help please
On 01/01/11 16:23, Chetan Crasta wrote:
Happy to help.
Try the same hack:
#header img {position:relative;}
~Chetan
Yep. Just did. It works, too.
Just out of interest, do you know what's going on here? Or is it one of
those, It works. Don't ask, sort of things? If I could get a handle
on why IE7 behaves in this way I might be better at spotting when the
hack should be applied.
Again, many thanks.
Cheers
Peredur
--
peredur.net http://www.peredur.net
__
css-discuss [cs...@lists.css-discuss.org]
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] faux column issue...
Ar 12/11/10 21:24, ysgrifennodd Michael Beaudoin : Hi all, I am working on a simple site that has columns and lines to divide the columns. Perfect for faux columns as the columns aren't equal depth. Anyway, when I put the background image in my page-wrap div, it shows up fine. When I put it in the background of the content div (because I want the line to not butt into the banner image) it won't show up. Not sure why. If anyone cares to look, go to http://ba-doyn.com/junk/ and check it out. If you look at the css, you will see I have commented out on the page-wrap div in case you wanted to toggle back and forth. Thanks again, Michael Is it because your content div only has floated content and therefore has no height? Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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 and Background-image
Ar 12/11/10 22:53, ysgrifennodd John : In the CSS box model, are background images understood to occupy the same height and width as the outer edge of the border area? thank you John Border inner edge, isn't it? I.e. content + padding. Could be wrong, though. Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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 and Background-image
Ar 12/11/10 23:10, ysgrifennodd Thierry Koblentz : In the CSS box model, are background images understood to occupy the same height and width as the outer edge of the border area? I believe it is the border box (content + padding + border) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz You're absolutely right. I stand corrected. From w3schools: Definition and Usage The background-image property sets the background image for an element. The background of an element is the total size of the element, including padding and border (but not the margin). I'm going to have to play now to see if a border overlays a background image or /vice versa/. Just as I was thinking about calling it a day for today! Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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 and Background-image
Ar 12/11/10 23:21, ysgrifennodd Peter Bradley : I'm going to have to play now to see if a border overlays a background image or /vice versa/. Just as I was thinking about calling it a day for today! Yup. If you have a background colour and a dotted or dashed border, you can see the colour behind it. W3C says: Authors may specify the background of an element (i.e., its rendering surface) as either a color or an image. In terms of the box model http://www.w3.org/TR/CSS2/box.html#box-model, background refers to the background of the content http://www.w3.org/TR/CSS2/box.html#box-content-area, padding http://www.w3.org/TR/CSS2/box.html#box-padding-area and border http://www.w3.org/TR/CSS2/box.html#box-border-area areas. Border colors and styles are set with the border properties http://www.w3.org/TR/CSS2/box.html#border-properties. Margins are always transparent. [http://www.w3.org/TR/CSS2/colors.html] Interesting. You learn something every day. Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] XHTML or not?
Ar 10/11/10 17:49, ysgrifennodd John : I am relatively inexperienced with CSS and HTML..I've made all my own web pages, but learn what I need at the time followed by years of doing nothing with it until the next re-design. A tutorial I watched recommended going with XHTML, but some say it's not the way to go, and I don't know for sure what the right direction would be for me. Recommendations? thanks! John Hi John, Was there any particular reason why XHTML would not be the way to go? Whatever DOCTYPE you decide to use, you have to follow its rules and - speaking personally - I've never found following the rules of XHTML to be any more onerous than those of HTML. Unless I really have no choice (e.g. a customer wants to force the opening of a new window from a link) all my stuff is XHTML 1.0 Strict and CSS 2.1. There are a couple of things you have to bear in mind if you want XHTML to work in older IEs, like omitting the XML declaration and not using XHTML 1.1 (both of which put IE into quirks mode, IIRC), but working with older IEs is going to be a problem whatever DOCTYPE you choose. XHTML might make it a bit easier to ensure the separation of structure and format, I suppose; but good practise should make you do that anyway. But at the end of the day - and in my opinion only - it's just a matter of choice. It's producing *valid* HTML that's important to me, not the DOCTYPE. HTH Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] Help
Ar 30/10/10 22:05, ysgrifennodd Brian M. Curran : Hi Ya'll, Help! How come my images are plopping on top of each other here: http://www.draftingservices.com/as-built_drawings.html ? The actually size of the images are 500px wide, but I shrunk that down with the CSS. Could that have anything to do with it? I suspect not. Sincerely, Brian M. Curran | CAD Consultant Without having played around with it a lot, it looks to me as though it's because your images overflow their containers. Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] Formatting nested lists
Hi,
I'm working on a project concerned with legislation and one of the
requirements is to format some of the data exactly as it appears in the
appropriate statute. Basically this means that level one ordered lists
should number (1), (2), (3) etc; level two ordered lists should go (a),
(b), (c) etc, and level three should go (i), (ii), (iii) etc.
For an idea of what I mean, for levels one and two anyway, take a look at:
http://www.legislation.gov.uk/ukpga/1998/24/section/2
The chapter number on that page can be ignored. I just need the
internal contents. Interestingly, the site above does not use lists to
format the data, so my question - below - might be something of a
forlorn hope: but I thought I'd ask anyway, since the data is going to
have to be entered by end users (after my contract has finished) using
an HTML editor like TinyMCE and I'm not looking forward to having to
train them in how to do that properly if we have to finish up with a
solution such as the one used on the UK Government site above. I guess
I would have to train them to edit the HTML produced by the editor in
order to allocate the correct classes to things: maybe even to add
elements like span and so on. Nightmare.
I know that it's possible to use standard CSS to do the following:
1. First level item 1
2. First level item 2
3. First level item 3
1. Second level item 1
2. Second level item 2
1. Third level item 1
2. Third level item 2
3. Third level item 3
3. Second level item 3
4. First level item 4
style
ol {
list-style-type: decimal;;
}
ol ol {
list-style-type: lower-alpha;;
}
ol ol ol {
list-style-type: lower-roman;
}
/style
/head
body
div
ol
liFirst level item 1/li
liFirst level item 2/li
liFirst level item 3
ol
liSecond level item 1/li
liSecond level item 2
ol
liThird level item 1/li
liThird level item 2/li
liThird level item 3/li
/ol
/li
liSecond level item 3/li
/ol
/li
liFirst level item 4/li
/ol
/div
...
The problem, of course, is that the parentheses are missing. Is there
any way I can use CSS to include the parentheses or am I stuck with the
standard list style types? Or is there some other magic I can use?
Given the alternative, I might be able to persuade my customers to
settle for the standard CSS, but I'm trying not to give up without a
fight. So any suggestions would be most gratefully received.
Thanks in advance.
Peter
--
http://www.peredur.net
__
css-discuss [cs...@lists.css-discuss.org]
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] Formatting nested lists
Ar 19/10/10 23:52, ysgrifennodd Andrew Cunningham :
ol { counter-reset: item; }
ol li { display: block; }
ol li:before {
content: ( counter(item, decimal) ) ;
counter-increment: item;
}
ol ol li:before {
content: ( counter(item, lower-alpha) ) ;
counter-increment: item;
}
ol ol ol li:before {
content: ( counter(item, lower-roman) ) ;
counter-increment: item;
}
Hi Andrew,
Certainly does work for me: in Firefox, anyway. I guess that IE results
might be mixed. Would that be right? I haven't got IETester handy at
the moment. Assuming that's so, and if I get decent results in IE8, I
could probably persuade the client that they can live with that. I'll
just use ordinary list formatting for any problematic IEs.
Do you have a reference where I could check that stuff out? Preferably
something I'll have a fighting chance of understanding (given that I'm
pretty happy with the basics of CSS).
:-)
But thanks a lot for that. It's good stuff.
Cheers
Peter
--
http://www.peredur.net
__
css-discuss [cs...@lists.css-discuss.org]
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] OS Specific CSS?
Ar 16/07/10 03:06, ysgrifennodd Philippe Wittenbergh : That would be me too… I've yet to discover differences on how Gecko (or Webkit) handle things differently depending on platform (except, eventually, with experimental features; but those are - hmm, experimental ? - and prone to all kind of breakage anyway). Do you have specific issues that you need help with ? Philippe --- Philippe Wittenbergh http://l-c-n.com/ I've occasionally noticed differences in form rendering between FF on Linux (Ubuntu) and FF on Windows (XP). I don't have an example to hand, though, unfortunately. Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] CSS Not Validating
Ar 21/06/10 22:13, ysgrifennodd Duane Nelson :
I'm using the following to fix a PNG display bug inie6:
/* PGN Fix forIE6 */
img, div {
behavior: url(../scripts/htc/iepngfix.htc)
}
But it causes the css to ot validate. Is there a way I can do this to get my
CSS to validate?
Thanks,
Duane Nelson
Loss2gaiN Designs
http://myL2G.com
On the one occasion I needed it, I used this:
!--[if lt IE 7]
style type=text/css
#banner img { behavior: url(styles/iepngfix.htc) }
/style
![endif]--
Obviously you'll want to substitute your own selector.
HTH
Peter
--
http://www.peredur.net
__
css-discuss [cs...@lists.css-discuss.org]
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] Sum total greater than 100%
Ar 19/06/10 22:10, ysgrifennodd John Dick : Why is right side longer than left side in this skeleton layout? You can see at the bottom of the webpage when this info is entered in a test document: The height property does not include padding, borders, or margins (see w3schools) HTH Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] Sum total greater than 100%
Ar 19/06/10 23:27, ysgrifennodd David Laakso : Hmm. I don't know why. 1/ When all the borders are removed the heights are still different in Mac Opera, Mac Safari, and the current WebKit nightly. 2/ When all the heights are converted to pixels, rather than percent, the heights are the /same/ in Mac Opera, Mac Safari, WebKit nightly, Camino, and Mac Firefox [see below]. Just a guess..., but rounding errors when calculating percentages?? Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] Fwd: Re: Making sure my container turned out
Ar 13/06/10 02:46, ysgrifennodd Thierry Koblentz : I believe the offset of relatively positioned elements is done in regard to their position in the normal flow, *not* in relation to a ancestor. They are *very* different from absolutely positioned elements. They can overlap surrounding boxes but do not disturb the flow, Yes. My bad. You're right and I didn't clarify that properly. Thanks. Normally, you would not expect to see both left and right specified: rather you would expect to see, say, left and top. It is possible to size absolutely positioned boxes via these values. For example left:10px;right:10px; will make the box stretch 10px from the left edge to 10px from the right edge of the parent that creates a positioning context. Ah! I wondered if that was the case, but had never seen it done so didn't mention it. Thanks again. I always have my heart in my mouth when answering anything on here. You lot are so knowledgeable you're not going to miss a thing! Still, it means that I learn something, as will as (hopefully) the person I'm replying to. a win-win, really, as they say. Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] Fwd: Re: Making sure my container turned out
build style sheets by
hand. Entirely by hand.
One thing VS does is to add non-breaking spaces all over the place.
It's an improvement on the pile of excrement that was FrontPage, but it
still does it. Your page shows this. If you want to create space
between elements on your page, never use non-breaking spaces. Use
margin or padding instead. The use of non-breaking spaces is deadly for
accessibility, for one thing. They should be used for what they were
intended, i.e. to prevent line breaks at particular points in the text
where a space would occur. For example, you would not want to see a
line wrap in the middle of a name, so you would markup
'Peternbsp;Bradley', instead of 'Peter Bradley'.
I wouldn't style the title in the way you have, either. It's a level
one heading in my book, so I'd useh1 and style that. Since that
gives you 150% font size by default as well as a bold font you can also
save on some rules:
.TITLECONTAINER h1 {
color: blue;
font-family: georgia, serif; /* note the generic font for computers
without georgia */
text-align: center;
}
Similarly the content pane. The content pane header is a header so you
should use a header tag. For instance:
dnn_ctr380_ContentPane h1 {
/* styles for content pane level one header... */
}
How did the contentpane end up being a heading? strange, because it doesn't
say that in the asp.net code... *boggle*
Nope. the content pane *header*: not the content pane itself. What I'm
saying is that if something is a header, it should be marked up using
one of thehn tags. As you know better than me, if you use a screen
reader it tells you if you are reading a header (something betweenhn
tags). So if you just mark it up as ordinary text (albeit styled
differently), people using screen readers (or text only browsers for
that matter) don't know there's anything special about it. And if
there's nothing special about it, then why are you styling it as if
there was? :-)
There are also a couple of validation errors that you ought to attend
to. They're easy enough to fix.
What would they be?
http://validator.w3.org/
Better still, do all your testing in Firefox and install the Developer
toolbar. Then you can use the toolbar menu to call the validator. Most
professional Web developers, in my experience, use Firefox in the first
instance and then check in IE afterwards to see what they have to do to
work around IE's bugs.
As it happens, the errors on your page are just emptyul elements.
ul elements must have at least oneli child.
HTH
Cheers
Peter
--
http://www.peredur.net
--
http://www.peredur.net
__
css-discuss [cs...@lists.css-discuss.org]
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] Making sure my container turned out
Ar 11/06/10 21:19, ysgrifennodd Chris F.A. Johnson : The title is not centred. It is bold, but in Firefox it is not Georgia. The text is too small to read. Yes. To centre the title you need to centre the div that contains it. Using text-align:center on the containing div will only centre it in IE (IE6??), so you need to give the title container div a width and automatic margins. Hopefully that won't mess it up in IE. Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] nav placement issue - ff and chrome great, ie not so great
Ar 10/06/10 21:28, ysgrifennodd Felix Miata : Who in the world has Century Gothic on their computer? Not I... I have it on several, but why the question? What is it about web developers that they're so insistent visitors never get to see their defaults without disabling styles entirely? If Century Gothic is my default, it's not because someone else picked it out for me, and I'd like to see it more often than not without having to stick to pages I created myself. I think you misunderstand the point. You have, in your styles: font-family : Century Gothic; The problem here is that if users don't have it installed (as I don't, for example), then they will see whatever default their browser thinks they should see - which may not be at all what you want. You might, therefore, want to consider a font list (in order of your preference) that contains some more common fonts and ends with a generic font (e.g. 'serif' or 'sans-serif' HTH Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] Is this a styling issue or an ASP .NET issue?
Ar 07/06/10 21:03, ysgrifennodd Ellen Heitman : So you're suggesting I just tidy up the current HTML code? Do you think it's necessary to take the time to go from tables to divs for each page? If you look at the code in Visual Studio, it will highlight the HTML errors (by underlining them with a squiggly red line). I'm not sure if Dreamweaver does the same; but you can get the free version (Express Edition, or something IIRC) of VS if you want. This will make correcting the code relatively easy. It looks to me as though it started off as an ASP.NET 2.0 project and then got ported to v2.0 or greater, thus changing the DOCTYPE to XHTML 1.0 Transitional. This has left you with loads of invalid code. Shouldn't be that big a job to make it valid, though, as far as I can see. HTH Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] CSS tooltip bug ONLY in FF and Chrome
Ar 03/06/10 19:51, ysgrifennodd Greg Smith : I have a class with position:relative on the 'a' tag, then absolute on the hover state. The positioning doesn't work correctly in either FF or Chrome. Works fine in every other browser. Haven't been able to find any possible reason in my Google searches thus far. Anyone else experience something like this? All relevant CSS has been placed in the head for debugging. My only possible lead so far: I've placed a border around the entire 'a' tag contents, and it's not wrapping around any of it. So my assumption is that these two browsers are not reading the correct positioning, if that makes sense?? LINK: http://www.loctiteproducts.com/super-glues-debug.shtml Thanks, GS The validator gives 117 errors, Greg. I guess that this means that different browsers are going to try to recover in different ways. They don't look too hard to cure. Many of them are to do with the product table you've included as a comment. Getting rid of that might get rid of a lot of them. Then there's the usual crop of missing alt attributes, which I wouldn't think are affecting your layout; but there's also a fair few where you appear to have used elements in places where they're not allowed. I'd have a go myself, but I'm a bit busy at the moment. If it was me, though, that's where I'd start. The worst that can happen is that it'll give you a clean basis to work on. Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] CSS tooltip bug ONLY in FF and Chrome
Ar 03/06/10 20:09, ysgrifennodd Peter Bradley : The validator gives 117 errors, Greg. I guess that this means that different browsers are going to try to recover in different ways. They don't look too hard to cure. Many of them are to do with the product table you've included as a comment. Getting rid of that might get rid of a lot of them. Then there's the usual crop of missing alt attributes, which I wouldn't think are affecting your layout; but there's also a fair few where you appear to have used elements in places where they're not allowed. I'd have a go myself, but I'm a bit busy at the moment. If it was me, though, that's where I'd start. The worst that can happen is that it'll give you a clean basis to work on. Cheers Peter Couldn't resist a little play! Yeah. Cutting out the commented product table reduces the errors to 38 or so. Your main problem then is that you have block elements like h1 and div and so on, inside inline elements - notably a. You can't do that. So you need to replace stuff like: a href=something.htmlh1A heading/h1/a with something like: h1a href=something.htmlA heading/a/h1 This will likely mess up your CSS, so you'll have to mess with it to get the look back to what it should be. After that it looks like all you'll have to worry about are some unclosed self-closing elements like input and some missing attributes. Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] Firefox wont align content in a table properly -- SAFARI issue
Ar 02/06/10 04:47, ysgrifennodd Matthew : Is this the how dare you make so many HTML/CSS violations and still seek our knowledge?!?!11? missive? Well, in my opinion, no. If your code does not validate it may well be that that is the cause of your problem. It's certainly the first place I would look. Just out of interest, I wonder why you think that suggesting you have valid markup is a kind of bureaucratic entrance exam rather than a genuine suggestion as to how you might solve your problem (or at least get a handle on it)? Do you know why it is desirable to have valid markup? Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] Background question...
Ar 02/06/10 19:56, ysgrifennodd Michael Beaudoin : Thanks to all for the help, but this one is escaping me... I have the following div's: div id=page-wrap div id=header p class=headHeadheader/p pheader copy/p/div div id=content div id=leftNavpleft nav here/p /div div id=mainpmain content here/p/div /div /div and I would like a background behind the content area, but when I put it in the page-wrap, it won't show behind the leftNav and main areas. The leftNav is floated left, and the main is floated right. What am I missing? I'm sure it's head-slapping simple. Thanks, Michael __ Heh! Yes it is - if I understand you correctly. Floats are not content in the same way as un-floated blocks are. So, your #page-wrap contains the #header, whose height is determined by the height of the two paragraphs it contains. You then have a #content div that follows the second paragraph but has no height at all because it has no non-floated content. Your floated divs float over this div and therefore display no background but their own. If you use Firefox's Web Developer's Toolbar and get it to outline block elements you'll see what I mean. Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] validators tied up today?
Ar 12/05/10 21:10, ysgrifennodd John : I haven't been able to get a page validated all week...others seeing this too? It's been very slow for a while now. It does work in the end, if you can stand the wait. Chers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] CSS/HTML validators down today?
On 05/05/10 23:16, John wrote: or just very slow? I've been trying to code-check a page of mine and it's been a good 5 minutes of spinning gear for me. anyone else? Yes. It's been slow for a while for me. I was thinking of posting a similar query. Cheers Peter http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] IE 7/8 issues
On 03/05/10 21:13, Jenni Beard wrote: Any thoughts? I am at my wits' end with this! Just a holding answer until someone can get back to you with something more constructive... You have an html error in your link element on line 6. It just need closing, that's all. That gets your html validating OK. In your CSS you have a number of errors - according to the validator: Sorry! We found the following errors (9) URI : http://charlestonhealinghands.com/1/main.css 51 #navParse Error ]margin-right:85px; 52 #navParse Error ]left: 400px; 53 Unknown pseudo-element or pseudo-class :none 54 background-colorParse Error none; 55 background-colorParse Error } 63 #contentValue Error : padding-top http://www.w3.org/TR/CSS21/box.html#propdef-padding-top -50.0 negative values are not allowed : -50px -50px URI : http://charlestonhealinghands.com/SpryAssets/SpryMenuBarVertical.css 22 ul.MenuBarVertical Value Error : background-color http://www.w3.org/TR/CSS21/colors.html#propdef-background-color none is not a color value : none none 59 ul.MenuBarVertical ul Parse Error ]margin: -5% 0 0 -95%; 60 ul.MenuBarVertical ul Parse Error } Correcting these may help. I haven't been able to check because I can't get my hands on IE7 for the moment. HTH Cheers Peter http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] IE problems - Float problem??
David Laakso wrote: It seems: to work this end in XP IE 6/7/8 on a Mac-- unless I have completely misunderstood the question? PC in sick bay so can't check it in that... Please see: http://www.chelseacreekstudio.com/ca/cssd/pp.htm Thank you, David. You are, as ever, a paragon of patience and helpfulness. I'm currently 63 and I just wonder how old I'll have to be before I stop getting caught out by browser caching! Thanks once again, and apologies for any time-wasting by posting about things I ought to have sorted out myself. Cheers Peter http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] IE problems - Float problem??
Hi, I have a problem again with IE6 and 7. I'm doing a demonstration form but can't get the second fieldset to right align in either IE6 or IE7. The HTML and CSS both validate and I've tried some conditional comments, which have worked for some other problems, but not for this. Also, the conditional comments opening and closing lines are showing in all versions of IE including IE8 (but not in other browsers). This suggests a mistake in the conditional comments, but I've looked at it all ways and I can't see it. The page is at: http://www.peredur.net/tt280/pb88_sp.htm Many thanks in advance Peter http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] IE problems - Float problem??
David Laakso wrote:
In your style sheet you have this hack from a couple of weeks ago:
/*Bit of nonsense for IE6 */
* html #wrapper {
width:975px;
margin: 0 auto;
}
Leave that hack in the style sheet. Immediately above it put these hacks:
*:first-child+html #wrapper {
width:975px;
margin: 0 auto;
} /*4 IE/7.0)*/
*:first-child+html fieldset.top-positioned {float: left; } /*4 IE/7.0)*/
* html fieldset.top-positioned { position: relative; zoom: 1;} /*4
IE/76.0)*/
Delete the CC and its content. If you actually need those hacks (I
didn't check) put them in the style sheet for now.
Thanks very much for that, David, but no joy, I'm afraid. It doesn't
render properly in any version of IE (6, 7 or 8). TBH, if I could just
get it working in IE8 it'd be something.
The hacks are for the background colour. I've taken them out so you'll
see what I mean. They came from Sitepoint's The art and science of CSS.
Reference: spend some time here...
http://www.satzansatz.de/cssd/onhavinglayout.html
I will.
aside
Points are not used to set type for the screen.
/aside
Aargh! I've no idea why I did that. Thanks for pointing it out. Now
corrected.
Cheers
Peter
http://www.peredur.net
__
css-discuss [cs...@lists.css-discuss.org]
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] IE6 float bug
David Laakso wrote:
IE/6.0 does not support min/max width or height and trips/bounces on the
percent margins on the wrapper.
* html #wrapper {
width:975px;
margin: 0 auto;
}
* html #left-nav {
height:85ex;
}
Best,
~d
Thanks, David.
It was the * html nonsense I'd forgotten. All working now.
Cheers
Peter
__
css-discuss [cs...@lists.css-discuss.org]
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] IE6 float bug
David Hucklesby wrote: Usually, adding an extra wrapper element inside your outer #wrapper with a 'width: 100%;' declaration on it helps IE compute the sidebar width correctly first time around. The jumping comes from a recalculation once IE has figured out 25% of the actual width of #wrapper. Not tested, but this usually works for me. Cordially, David -- Thanks, David. Yes I can see how that would work. I fixed it with David Laakso's suggestion, but I'll remember yours for next time. Thanks Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] 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] IE6 float bug
Thierry Koblentz wrote: I believe your wrapper needs a layout, so David's suggestion should work as it sets a width on #wrapper. Did you try that fix? Depending on which David you mean... I got it going with David Laakso's suggestion. Also, I'd wrap the main content in another DIV and style that one with overflow:hidden and zoom:1 to create a new block formatting context to escape the left float. That's very useful. Thanks. I can see where that could be needed. Thanks for the suggestion. Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] 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] IE6 float bug
I have an example site that I've developed for a course I'm doing. There are no serious problems with it except in IE6; of which there is just one that I can't remember how to fix. Here's one of the pages affected: http://www.peredur.net/tt280/pb88_ph.htm On opening the page, the right sidebar is mis-positioned; but it jumps back into the correct place if I hover over a link in the main-nav navigation bar. I seem to remember that there is an easy fix for this in CSS, but I can't for the life of me find my notes. Can anyone, please, remind me as to what I have to do? It's not absolutely essential that I get the pages working in IE6, but I hate leaving a job half done. The pages validate OK, by the way. Thanks in advance Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] 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] public websites with faulty CSS-s
Sander Sõnajalg wrote: but really, please, if anybody knows if there is some sort of a list of faulty public real-world pages, i'd appreciate really if you let me know... i've googled unsuccessfully for quite some time now. i just need something to get me started with Hi Sander, I don't know of any list, but for XHTML, just hit a few random websites. I'd bet that a good 30% would be invalid. As for CSS, even the w3c site index page is invalid: http://jigsaw.w3.org/css-validator/validator?profile=css21warning=0uri=http%3A%2F%2Fwww.w3.org%2F (It uses some Mozilla-only styles, I think, and some hacks to make sure the page renders properly in IE6). Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] 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] Fixed three-column with padding: newbie question
Doug Niven wrote:
Hi Folks,
I'm definitely a newbie, trying to wean myself off tables.
What I need is a 720px wide box with three 240px cells inside it, with 10px
padding-right for each cell.
It cannot be flexible or stretchable.
I found what I **thought** might be the recipe for such a design:
http://www.electrictoolbox.com/basic-3-column-fixed-width-css-layout/
However, I cannot get the middle cell to display 240px wide:
http://people.ucsc.edu/~class1/
Any suggestions/ideas MUCH appreciated, so I can leave tables behind!
Thanks!
Cheers, Doug
Hi Doug,
I suspect you haven't told us the full story, so here's the simplistic
answer. Note that the columns are each 240px wide (230px of content +
5px left padding + 5px right padding). Both the HTML and the CSS are valid:
!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;
head
titlea propos nothing/title
meta name=GENERATOR content=Quanta Plus /
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
style type=text/css
#wrapper {
width:720px;
}
#left, #middle, #right {
width:230px;
padding:5px;
float:left;
}
/style
/head
body
div id=wrapper
div id=left
p
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi viverra dignissim dui, sit amet pellentesque orci sagittis vel.
Integer eget enim eu nibh consequat cursus nec eu erat. Pellentesque
eleifend turpis at nunc commodo vehicula. Suspendisse potenti. Praesent
nec massa sed tortor ultrices molestie fermentum sed purus. Nunc eu
lacus nisi. Aenean ultrices, ipsum in vestibulum ornare, lorem erat
auctor sapien, aliquet blandit diam justo ut dolor. Sed quis euismod
nibh. Nulla facilisi. Maecenas tempus congue leo sit amet ullamcorper.
Aenean vitae felis sit amet elit cursus aliquet. Sed venenatis vehicula
porttitor. Mauris viverra facilisis nulla, id laoreet neque consectetur
sed. Nulla in egestas felis. Aliquam a metus nulla, non feugiat ligula.
Praesent gravida, libero quis cursus dignissim, turpis justo pulvinar
orci, a pulvinar tortor est vitae augue.
/p
/div
div id=middle
p
Mauris sed ullamcorper diam. Vivamus ac risus ut nulla
placerat fermentum volutpat a ipsum. Nulla vitae dolor justo, vitae
blandit metus. Sed lobortis dapibus libero nec dapibus. Vestibulum arcu
sapien, semper et euismod eu, rutrum semper metus. Pellentesque volutpat
diam at lacus fermentum in luctus diam lobortis. Praesent nec nibh orci.
Etiam quam nisi, tempus et pharetra vel, euismod ut elit. Phasellus non
lectus nunc. Maecenas nec lacus nisl. Pellentesque malesuada elit
iaculis est euismod dictum gravida turpis elementum. Vivamus tempus,
justo at blandit dictum, lacus elit rutrum augue, eget varius magna eros
eu arcu. Integer malesuada gravida ligula, a bibendum purus semper nec.
Cras suscipit ipsum non tortor convallis ac egestas elit sollicitudin.
Vivamus imperdiet dui vitae lorem vulputate adipiscing. Vivamus ultrices
dui ac augue tincidunt vel posuere orci molestie. In tincidunt, augue id
viverra elementum, metus sapien venenatis tortor, sit amet ornare nisi
magna ac velit.
/p
/div
div id=right
p
Morbi luctus urna vitae quam malesuada tincidunt. Quisque
facilisis ligula at mauris iaculis vel luctus mi consequat. Vivamus
fermentum auctor odio a gravida. Praesent a sem a mauris suscipit
gravida. Sed massa mi, malesuada a fringilla id, molestie vel mi. Sed
risus dolor, porta sit amet tempus sed, gravida id dolor. Maecenas
libero enim, cursus a imperdiet eget, laoreet sed massa. Aliquam
consequat lacinia mattis. Mauris a quam nulla. Praesent consectetur
sagittis ullamcorper. Praesent tincidunt condimentum feugiat. Curabitur
ullamcorper dapibus dui vitae convallis. Sed placerat rhoncus
condimentum. Cras sit amet est vel turpis rutrum tincidunt.
/p
/div
/div
/body
/html
Actually, I'd let one of the columns size itself, to give the browser
some wiggle room. And don't forget that if you want borders and/or
margins that these add to the width.
Cheers
Peter
http://www.peredur.net
__
css-discuss [cs...@lists.css-discuss.org]
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] IE6 doesn't see styles [solved]
Many thanks to everybody who replied and helped with this. I've re-written the page, using floats instead of absolute positioning, and ems instead of percentages: http://www.peredur.net/swanwick It now doesn't need any conditional styles. It's not going to win any design awards, but it'll make a good demonstration, I think. Cheers, and thanks again, Peter http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] IE6 doesn't see styles [solved]
Bill Braun wrote: Congrats, Peter. BTW, those writers sure look happy. Bill B Probably drunk. :) The presentation I'm doing is for their summer school this August, and is about Web pages for authors. Hopefully I'll be able to get them to approach their Web presence just as professionally as they approach their writing: rather than letting their niece put something up for them using Front Page, Because she's doing it at school. Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] 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] IE6 doesn't see styles
Troy Harshman wrote: I played with your code for a few minutes and it appears that the IE6 conditional comments are working. I think your issue is related to browser resolution. It looks fine in IE6 at 1280x1024, but not at 1024x768. Firefox, it looks fine regardless of screen resolution. You also have another issue in IE6, the menus about double in width when you put the mouse over them. __ css-discuss [cs...@lists.css-discuss.org] 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/ Thanks, Troy, sigh It gets worse, doesn't it? I've only ever seen the menu width changing on hover where the styles aren't recognised, but it must be more than that, obviously. I think it's time for a re-design. Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] 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] IE6 doesn't see styles
Bill Braun wrote: Peter, I created a template that holds a whole bunch of pieces and parts for a site I am working on. You can include or exclude the different pieces/parts on each page as you wish. It should fit what you are doing, at least as a start. It plays nicely with IE5.5, 6, 7, and 8, FF, Safari, Chrome, and Opera (although it renders slightly differently on the IE browsers, it does not choke, blow up, or commit suicide). The documents are attached. Bill Thanks, Bill, that's very kind of you. Since it looks as though I have to do a redesign, they look like a good option. Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] 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] IE6 doesn't see styles
Alan Gresley wrote: My Multiple IE version sectors (conditional comments) were broken when I allowed IE8 to write over IE7. Not knowing much the registry I assume one fix is to uninstall and reinstall Multiple IE. I think that's my problem. Installing IE8. I may try reinstalling MultipleIEs. Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] 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] IE6 doesn't see styles
Troy Harshman wrote: I played with your code for a few minutes and it appears that the IE6 conditional comments are working. I think your issue is related to browser resolution. It looks fine in IE6 at 1280x1024, but not at 1024x768. Firefox, it looks fine regardless of screen resolution. You also have another issue in IE6, the menus about double in width when you put the mouse over them. Yup. I just reinstalled MultipleIE on my XP installation. That fixed the registry problem, but I can now see the issue that you mention. Like I said: time for a redesign. Floats? Absolute positioning wrt the viewport? So many decisions... Thanks Peter __ css-discuss [cs...@lists.css-discuss.org] 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] IE6 doesn't see styles
I have a page at: http://www.peredur.net/swanwick The main stylesheet is at: http://www.peredur.net/swanwick/styles/styles.css There are two blocks of inline, conditional styles; one block for IE7 and one for IE6. IE7 picks up its styles fine, but IE6 doesn't appear to pick up those for IE6 - at least not when I use the MultipleIEs IE6 installation. In IETester, the rendering is fine on an IE6 tab. I don't have any other access to IE. Is there something I've missed concerning conditional styles that means that IE6 is ignoring the ones I've put in the file? The page's HTML is valid (per the w3c validator), as is the CSS. Many thanks in advance, Peter __ css-discuss [cs...@lists.css-discuss.org] 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] IE6 doesn't see styles
James White wrote: It's an issue with multipleIE, basically IE6 thinks that it's whatever version your native IE installation is when evaluating conditional styles because multiple IE doesn't change the IE version that's stored in your system registry. Phew! That's a relief. Many thanks for that, James. You learn something every day. I was beginning to doubt IETester, but clearly it's getting it right. Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] 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] IE6 doesn't see styles
Troy Harshman wrote: I happen to have IE6 on my computer at work. I'm going to be leaving shortly, but I took a look at your page and code quick. The page doesn't look the same in IE6 as it does in Firefox. The left and right navigation menus are both pushed a ways off the screen. Based on your IE6 conditional comments, it looks like they aren't coming through since it appears you set some left properties to fix the issue. Oh dear! This is very odd. I just installed IE6 under WINE on my Ubuntu box. It picks up the conditional styles OK in that configuration. Why won't it just die! :) Anyone else got any ideas. I really don't know what to make of this, now. Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] 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] IE6 doesn't see styles
Troy Harshman wrote: Well, I also so happen to have IE6 still on my XP install (I dual-boot Vista and XP), which I didn't upgrade to use for testing. I'm still seeing the same behavior. However, I notice you're using absolute positioning for your navigation and such, which may be making things more difficult than they need to be. Is there a particular reason why you didn't use floats? Using percentages and such with absolute positioning just seems like a situation where you'll upset IE. If you want the navigation and content to flow a certain way without styles, then you could float the left nav and content (left) in a div and then float that entire div left and float the right nav to the right. So your markup would be right nav, left nav, and then content, with right nav alone and left nav and the content in a div.. I would think that would work. You'd need an extra div, but it may make life easier with cross-browser compatibility. Thanks, Troy, Yeah. I'm sure it'd work. The only thing against it would be SEO. I may do that. This isn't for a real site. It's a demonstration for a presentation I'm doing to a writer's group, so I don't want anyone in the audience who's got IE6 on a laptop to suddenly stick a hand up and say, Hey! It doesn't work in IE6!. I may do both just to show the choices that are available. The real site that I took this from is the site of the group I'm giving the presentation to (http://www.wss.org.uk): so you'll see why it makes a good demonstration! Thing is, I suppose, is that it's not the CSS that upsets IE. It just doesn't see the CSS under some circumstances. Given IE's history with floats I may yet have the same problem with floats. I'll definitely give it a try, though. BTW, when you say you're still seeing the same behaviour, do you mean the Rendering correctly behaviour, or the Rendering incorrectly behaviour? I'm hoping the former, but fearing the latter. Thanks for the help. Cheers Peter http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] float: left; height: 100%?
Jack Bates wrote: How can I style the following, div class=field h3Name/h3 div Value /div /div - so it displays with the name on the left, the value on the right, and a grey background behind the name? http://www.sfu.ca/~jdbates/tmp/css/201001050/screenshot.png Looks like a proper use for a table to me - with a background colour on the table cells. HTH Peter www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] 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] Text alignment
bruce.som...@web.de wrote:
I hope I'll be excused for another question that is presumably all too
simple. I must be overlooking something obvious.
I want the image 004.jpg centered in its column. It is indeed, at
http://www.maireadnesbitt.com/_bruce/news/BSOt.html
I want the paragraph The Cultur-Casino in Berne ... centered in that same
column, but the text within the paragraph justified.
But the paragraph appears at the left of its column on that page.
div id=batch025 align=center
img src=/photo/BSO/004.jpg alt=Konzerthaus /
/div!-- batch025 --
!-- --
div align=center
p align=justifyThe Cultur-Casino in Berne, Switzerland, scene of the New
Year's br /Concert, bCeltic Tunes/b,
of the Bern Symphony Orchestra. /p
/div
CSS:
#batch025 {max-width: 1030px; margin:auto;}
#batch025 img {vertical-align:bottom; margin:auto; padding: 0 10px 10px 0;}
#batch025 p {clear:both;}
Bruce
Hi Bruce,
The image was centred for me, already.
You've got one or two funnies in your code there. For example, you have
some stray Unicode characters directly in the body:

(For copying and pasting into your text?? If so, you should be using
entities; like iquest; for the inverted question mark.)
You also have at least one empty paragraph, which displays nothing, of
course.
Your main problem though is in using br / in the text you want to
centre. Apart from anything else, this gives strange wrapping behaviour
if you reduce the browser window width. For example, by reducing my
viewport width by about 50%, I got the text formatted like this:
The Cultur-Casino in Berne, Switzerland, scene
of the New Year's
Concert, *Celtic Tunes*, of the Bern Symphony
Orchestra.
-- which kind of defeats whatever purpose there might be in using br /
in the first place --
If it was me, I'd ditch the line breaks, put the paragraph you want
centered in the batch025 div, decide how wide you want it, give the p
a class (e.g. something like 'centred-caption') and then style it with
equal borders either side using percentages or ems. Alternatively, you
could give the centred caption a width and set the left and right
margins to auto, although that might make IE6 behave badly (hasLayout).
HTH
Peter
__
css-discuss [cs...@lists.css-discuss.org]
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] float: left; height: 100%?
J.M. Knowles wrote: Could this also be done with a definition list and then styling the dt tag? Yeah. I had a look at that. Semantically it would be best: but I couldn't see a way of doing it offhand. Then, whilst I was playing, it occurred to me that it was strange that the OP gave the actual HTML like that. Then it occurred to me that this looks a bit, or a lot actually, like a homework question. That annoyed me. So I stopped looking. I don't mind people asking for help with homework, but I think they should be up-front about it and expect to get only pointers to solutions. If my suspicions are correct, this is tantamount to getting someone to do their homework for them, by deception. That's the only reason I can think of for the actual HTML being important. Apologies to the OP if the HTML is actually not important and is being used for some completely different purpose. Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] 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] Text alignment
Pi Dizayn wrote: :D Peter,  This sign is for defigning UTF pages. It is called as Byte order mark. If you open the page and change the encoding to UTF8 you will see that it will be gone. Heh! Yer live an' learn, dontcha. :-) Peter __ css-discuss [cs...@lists.css-discuss.org] 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] aligning elements
Lisa Frost wrote: Hi Peter, Thanks, floating left and changing some padding and margins have now produced the desired effect. I used an image just because its not a standard font. All the other fonts on the site are quite bland and the bog standard ones you find on most peoples computers. Haven't finished doing all the missing alt tags yet. I really don't want to use verdana or Geneva for the header as well. So next question: If i need to align two elements then the way to do it is to float one of them? Is there a css equivalent to for example align=absmiddle in HTML? Thanks Lisa I'm not the most expert person on this list by a long chalk, Lisa, but my experience is that there are always about half a dozen ways to do things. For example, in this situation you could have floated both elements left, or you could have floated the menu to the right. On the other hand you could have made them display inline, I suppose! You could even have used the CSS2.1 table-like display values, or even set the display to inline-block: http://www.w3schools.com/css/pr_class_display.asp Or you could use CSS positioning... (See what I mean? It's endless) A lot of it depends on the decisions you make in the structure of your HTML. For instance here, you'd decided to make your menu an unordered list (IIRC), which is another block element, so in the natural flow of things it's going to come below the block element immediately preceding it in the HTML - which was an image in this instance. On other occasions, you might not be dealing with two block elements - in which case the problem would be solved differently. I guess that most people have their own pet ways of doing things like this. Using a float like this just happens to be mine. The most important thing is to make sure you can envisage what's happening, I think. This means being thoroughly familiar with the CSS box model. Once you can envisage that, you'll understand what's happening and be able to think of ways of tackling it. And there are tools. I take it that you develop in Firefox (if not, why not?). Assuming that to be the case, you are spoilt for choice. The Web Developer toolbar comes with element outlining facilities, which can be invaluable. Then there is Firebug. The best thing about Firebug, for me, is the fact that it allows you to right-click on any element and select Inspect element. You can then see all the style rules that apply and how they are affecting the layout on your page. HTH Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] 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] Please help. Why doesnt my heading show in mozilla?
rob...@angelsoflight.net wrote: Thanks to everyone for the help. I have started over and used the code David suggested below, and the Headlines are working!!! Thanks so much David, and everyone For the responses. I have just one more question or it may takes 2 weeks again to figure out what I did before. lol Please tell me how do I center the video and the background. It will only move partially if I type in float: right; When I tried Center it went back to the left. Please tell me where and what to write in to get the video and background image to go the center like the logo heading and four 4 images on this page. thanks so much for all the help. I am so grateful to get this finished . The way I always do it, is to give an enclosing div a width the same or very slightly more than the object (whichever works best) and set that div's left and right margins to auto. Someone else here may know better, though. Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] 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] object vs iframe
I need to embed one html page in another. I've done this using the object element: http://www.peredur.net/miami-beach-suites/individual-properties-main.html (current test site version) Now I find that it doesn't display in any current version of IE. Does that mean I have to use an iframe? Or is there a way to get object to work in IE? I'd like to use the object element if I can, so that all the pages will be XHTML 1.0 Strict: but if needs must ... Thanks Peter __ css-discuss [cs...@lists.css-discuss.org] 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] Form in IE6
Peter Bradley wrote: Hi, I'd be very grateful for some help. I'm creating a form for a customer. You can see it on my test site: http://www.peredur.net/miami-beach-suites/bookings.php It's fine in FF and OK in IE7, but I can't make any sense of it at all in IE6. I can't find anything that will make it render sensibly. If anyone has any ideas about what I might try, I'd be very grateful. Cheers Peter Sorry to reply to myself. I've got it rendering properly by using Dean Edwards IE7-js script. Unfortunately, the PHP doesn't work for IE6 for some reason, and I can't think of any way to debug it. So, unless anyone knows better, I guess it's got to be IE7 or better as far as IE is concerned. Not looking forward to telling this to my client, I have to say. Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] 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] OT - Form in IE6
Jack Timmons wrote: On Sun, Nov 15, 2009 at 10:00 AM, Peter Bradley p.brad...@dsl.pipex.com wrote: Peter Bradley wrote: Sorry to reply to myself. I've got it rendering properly by using Dean Edwards IE7-js script. Unfortunately, the PHP doesn't work for IE6 for some reason, and I can't think of any way to debug it. So, unless anyone knows better, I guess it's got to be IE7 or better as far as IE is concerned. Not looking forward to telling this to my client, I have to say. Cheers Peter To say that PHP doesn't work for IE6 is incorrect. PHP only reacts differently based on the browser if you put code in the PHP to sniff the browser and react differently. It is more than likely an issue with your Javascript. Being that I'm rebuilding my desktop, I can't offer much more advice, but if you need help, you can e-mail me directly to keep the discussion off-list. Yes. Bad wording. I didn't mean to suggest that the problem lay with PHP. Apologies. Peter __ css-discuss [cs...@lists.css-discuss.org] 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] Form in IE6
Hi, I'd be very grateful for some help. I'm creating a form for a customer. You can see it on my test site: http://www.peredur.net/miami-beach-suites/bookings.php It's fine in FF and OK in IE7, but I can't make any sense of it at all in IE6. I can't find anything that will make it render sensibly. If anyone has any ideas about what I might try, I'd be very grateful. Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] 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] testing layouts
Ysgrifennodd David McGlone: Hi everyone, I have a question about techniques. What I'm wondering is how everyone tests their layouts when not every browser and resolution is available. I'm running Kubuntu with Firefox and Opera running on 1440x900 resolution and I also check on my laptop running Win XP with IE V. 6.0. with the same 1440x900 resolution. It bugs me to no end when positioning something and it isn't exact in none of the browsers, some a little off, some way off. Hi David, I develop under Linux using Quanta for straight html and Eclipse for PHP, using FF as my main browser. On my development box I check that everything is OK in FF, then I test in Konq and Opera and IE6 (using IEs4Linux). I also have XP running in a virtual machine, on which I use IETester (http://www.my-debugbar.com/wiki/IETester/HomePage). To get everything acceptable at this level, I only use hacks/browser-specific html comments that correct for IE, but that are ignored by all compliant browsers. When everything looks OK, I check it out on a couple of laptops I've got, and on a couple of netbooks. I don't have to worry about things like mobile phones (yet). I try to make sure that I can hit [Ctrl]+[+] at least 5 times before anything starts to downgrade significantly. If possible, I try to use only relative units (ems and percentages usually), possibly from a known start point (e.g. a base font size in pixels to which everything else is relative). Then I try to give the browser as much wiggle room as I can by specifying as few dimensions as I possibly can. I don't think I ever specify every width across any block, and I can't remember the last time I specified a height except for cells in tabular data (usually things like timetables). Having said all that, I also only tend to deal in relatively straightforward designs. I certainly don't have any designers on my back who want pixel-perfect respresentations of their creations. So I have things pretty easy, I think. I hope this is useful The replies you get from other people will certainly be more so. Oh! and I'm just reporting what I do. I'm not saying you should do the same. Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] 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] Problem with form in IE6 and IE7 [Solved]
Ysgrifennodd Bill Brown: Hi Peter, The DL.DT.DD family is a rare and unique jewel in the family of HTML tags and the only one I know of with such a relationship between the three elements in the sub-family. I've used it many times and been pretty happy with it. That being said, it doesn't fit in this case and there's already a set of tags for this. I can understand Jukka's suggestion to use tables to achieve the desired effect and I've looked at his page, but I'd like to offer an alternative. One thing that is commonly overlooked is that the label element is permitted to wrap around it's associated input element such that instead of this: label for=thingLabel Text:/labelinput name=thing id=thing ...we're also allowed this: label for=thingLabel Text:input name=thing id=thing/label When we make the label element display:block, we then get a row we can work with. Throw your label text into a span, add a little float and negative margin magic and we can very closely emulate what we could achieve with tables. I've prepared a snippet of your form using this method and published it at this URL: http://theholiergrail.com/cssd/spanish-intensives-form.html Heck! You guys are good. From being without a solution I now have four of yours to pick from and one of my own. Whilst playing around with the form at work (don't tell my boss, as this is not a for-work project), I discovered that if I used an ordered list rather than a definition list, I got something much easier to handle. I'll mess about with all the solutions now, and probably pick the one that I feel most comfortable with for maintenance and re-use. Many thanks for all your help. It's much appreciated. Cheers Peter __ 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] Problem with form in IE6 and IE7
Hi, I have a form that I can't get to format properly in IE (6 or 7). You can see it at: http://www.apvx95.dsl.pipex.com/SpanishIntensives/bookingPHP.html The stylesheet is at: http://www.apvx95.dsl.pipex.com/SpanishIntensives/styles/spanishintensives.css All the selectors for the form are at the bottom of the stylesheet. Both the CSS and the XHTML validate OK. It's basically a form cribbed from Simon Collinson's Beginning CSS Development. It looks fine in FF, Safari and Opera, but in IE6 and IE7 the form data entry elements line up underneath their labels instead of alongside them. Is there a technique for getting a form like this to look right in IE? Thanks in advance. Cheers Peter __ 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] IE6 horizontal list height problem
Ysgrifennodd Gunlaug Sørtun:
Can be fixed by applying 'hasLayout' to the right element to prevent IE
from finishing to early, but in this case the simplest fix is to add...
#home-navlist a {
position: relative;
}
...which makes IE collect together and stack all layers of an element
properly and make it all visible.
Many thanks Georg, and Antonio too. And thanks for explaining why this
happens. I think I've met this bug before without ever knowing what it was.
Anyway, it works now.
I used the postion:relative fix in the end, for no particular reason.
Both solutions work, as I'm sure you know.
I'm grateful to you.
Peter
__
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] Can't put #8220; in a blockquote?
I have some HTML that looks like this:
!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;
head
meta http-equiv=content-type content=text/html;
charset=utf-8 /
titleSpanish Intensive - Feedback/title
!-- stylesheet reference goes here --
link rel=stylesheet type=text/css
href=styles/spanishIntensives.css /
!--[if lt IE 7]
style
/* for IE/6 - to prevent double-spacing of leftnav list items*/
#leftnav ul li a {
height : 0;
}
#leftnav {
margin-top: 2em;
}
/style
![endif]--
/head
body
div id=header
img id=logo src=images/Logo-SI-BIG4b.jpg alt=Spanish
Intensives logo title=Spanish Intensives /
/div
div id=main
h1
Feedback
/h1
h4
Here are some comments from students who took our
courses in previous years:
/h4
img class=imgright src=images/Grupo-2-1.jpg
alt=Students and teachers title=Students and teachers from a previous
course by the entrance tot he Residencia /
blockquote
#8220;I found the teaching of exceptionally high
standard.#8221;
/blockquote
blockquote
#8220;All sessions focussed and engaging, and good
fun.#8221;
/blockquote
... and so on for 36 quotes.
When I try to validate the page, I get the following error for each
blockquote:
/Line x, Column y/: character data is not allowed here.
| #8220*;*some quoted text.#82|
You have used character data somewhere it is not permitted to appear.
Mistakes that can cause this error include:
* putting text directly in the body of the document without wrapping
it in a container element (such as a paragraph/p), or
* forgetting to quote an attribute value (where characters such as
% and / are common, but cannot appear without surrounding
quotes), or
* using XHTML-style self-closing tags (such as meta ... /) in HTML
4.01 or earlier. To fix, remove the extra slash ('/') character.
For more information about the reasons for this, see Empty
elements in SGML, HTML, XML, and XHTML
http://www.cs.tut.fi/%7Ejkorpela/html/empty.html.
=
I don't understand why that is an error. Isn't a blockquote a
container just like a p is? Or am I missing something really simple
(again).
Cheers
Peter
__
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] Can't put #8220; in a blockquote?
Ysgrifennodd Peter Hyde-Smith: Peter: You may need to wrap each block in a p.../p or div ... /div, blockquote p#8220;I found the teaching of exceptionally high standard.#8221;/p /blockquote Try that, and post a link if you can. Regards, Peter Neither of those seem to work, either. I've posted the page to: http://www.apvx95.dsl.pipex.com/SpanishIntensives/feedback.html You'll see that the first blockquote is contained in a p/p block and the second in a div/div block. Cheers Peter __ 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] Can't put #8220; in a blockquote?
Ysgrifennodd Bill Brown: You've reversed Peter's instructions: This is wrong: pblockquote/blockquote/p This is correct: blockquotep/p/blockquote If you apply Peter's direction, I think you'll find greater success. Hope it helps. --Bill D'Oh! Thanks to Peter, Benjamin and yourself. English never was my strong point. Cheers Peter __ 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] Centre an image
I apologise in advance for this really silly question.
I'm just trying to centre an image at the top of a page, but I can't for
the life of me do it. I must be going mad.
All I have in my html file so far is this:
!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;
head
titleSpanish Intensives - Home/title
meta http-equiv=content-type content=text/html;
charset=utf-8 /
/head
body
img id=logo src=images/Logo-SI-BIG4b.jpg alt=Spanish
Intensives logo title=Spanish Intensives /
/body
/html
In my CSS file, I've tried:
#logo {
margin-left:20%;
margin-right:20%;
}
I've tried various percentages but none work.
I've also tried:
#logo {
width:60%;
margin:auto;
}
(at various widths - using ems, percentages and pixels)
I've also tried putting the image in a div and tried centering the div,
but with no more luck than with the image itself.
Whatever I do, the img sticks stubbornly to the left of the viewport.
I'd be very grateful if someone could put me out of my misery.
Thanks
Peter
__
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] Centre an image
Ysgrifennodd Estelle Weyl:
Give the parent a width of 100%, then give the image a display of block and
margin auto.
Doesn't seem to work for me. I've now got in the HTML:
!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;
head
titleSpanish Intensives - Home/title
meta http-equiv=content-type content=text/html;
charset=utf-8 /
/head
body
div id=header
img id=logo src=images/Logo-SI-BIG4b.jpg alt=Spanish
Intensives logo title=Spanish Intensives /
/div
/body
/html
and in the CSS:
#header {
width:100%;
}
img#logo {
display:block;
margin:auto;
}
The image still sticks to the left of the viewport.
Thanks for the suggestion, though.
Cheers
Peter
__
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] Centre an image
Ysgrifennodd David Laakso: You wanna know silly and gone mad hang around in my space for awhile. An example always helps me. http://www.chelseacreekstudio.com/ca/cssd/d.html In the spirit, therefore, of the example: Muchos gracias. Hasta luego. Peter __ 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] IE6 horizontal list height problem
I have a horizontal navigation list on a page. It looks fine in FF, but has no bottom padding in IE6 (I haven't had chance to try it in IE7 yet). Is there a fix for this, or do I have to live with it? I've put the page up temporarily at: http://www.apvx95.dsl.pipex.com/SpanishIntensives/index.html Thanks a lot. Peter __ 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] IE6 horizontal list height problem
Ysgrifennodd David Laakso: Validate the markup. Bring it back. Let's play. As ever, el mariachi -- desperado http://www.youtube.com/watch?v=_BPeN5dRftkfeature=related Ouch! Yes. Sorry. Copy and paste error. Now validates, but is still odd in IE6 Thanks for pointing that out. Cheers Peter __ 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] FireFox problem?
Can anyone spot what I'm doing wrong here: http://www.peredur.uklinux.net/PlaceForWords/case-studies.html It renders exactly how I want it to in Opera and Konqueror. It's OK in IE6 - a bit odd, but acceptable. It's all over the place in FireFox, which seems to push some of the paragraphs down such that the first line of the paragraph doesn't line up with the floated image. Both the HTML and the CSS validate OK. The CSS is at: http://www.peredur.uklinux.net/PlaceForWords/case-studies.html It's up on a test server at the moment, so if the images take a bit to download, please be patient. This is the first time I've ever come across something that's OK in Opera and Konq, but not in FF, so I'm sure I'm just missing something blindingly obvious. Many thanks Peter __ 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] FireFox problem?
Ysgrifennodd Gunlaug Sørtun:
snip /
All browsers at my end show the same.
If you want the paragraph-text to line up with the image, you'll have to
zero out the top margin, like so...
#content p.thumbnaillist {
font-size: 90%;
margin-top: 0;
}
...(pay attention to the added specificity).
Yes. That's what I wanted. It's what I get in Opera, IE6 and Konq (all
on Linux). FF is the only one this end that doesn't do that. I checked
FF on Windows as well and it's the same - so I implemented your fix
above, and all is well. I don't understand why the added specificity
was needed, though. Could you explain that to me, please?
I'll also suggest the following additions/modifications...
.thumbnailleft {
clear: left;
}
div.temp {
clear:both;
font-size: 1px;
line-height: 0;
height: 0;
overflow: hidden;
}
...to make sure all browsers keep things in line.
I'm onto it as we speak.
:)
Many thanks to both you and David.
Cheers
Peter
__
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] FireFox problem?
Ysgrifennodd Del Wegener:
I checked it in FF and it looks fine. However, in IE7, the Menu/links
on the left are all messed up.
The boxes are quite narrow (they appear to be the right length) so
the words do not fit inside, as you move down the menu the boxes are
all presented before the Contact and Mailing
Del
It does too. I'd not checked IE7, foolishly thinking that if it was OK
in standards browsers and IE6, it'd be OK in IE7. I haven't got a clue
what to do about this ...
Ah! Fixed it (I think). There's a mistake in my conditional comments.
I've got:
!--[if lte IE 7]
style
/* for IE/6 */
ul#c1 li a {
height : 0;
}
ul#c2 li a {
height : 0;
}
/style
![endif]--
I need !--[if lt IE 7] ...
Works for this page, anyhow. So I'll do the others and see how we go.
Many thanks for pointing that out. Saved my blushes a bit there, I think.
Cheers
Peter
__
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] FireFox problem?
Ysgrifennodd Gunlaug Sørtun:
#content p {
margin : 20px 30px 20px 0;
}
Georg
D'oh.
I forgot. IDs count more than classes, don't they.
Half a day of my life wasted for forgetting that!
Thanks a million Georg.
Peter
__
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] FireFox problem?
Ysgrifennodd Del Wegener: I rechecked both FF and IE7 and they are now fine. Good looking page. Del Better looking now, thanks to you and the others! :) Many thanks. Peter __ 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] Site Check please
Could someone please check just the home page for me at: http://www.sarahbutler.org.uk/index.html My client tells me that the photo obscures some of the text using FireFox on a Mac. I don't have a Mac to check it on, but it seems fine everywhere else ... I wonder if it's a screen size/resolution problem? If so, does anyone have an idea as to how to fix it. The styles are at: http://www.sarahbutler.org.uk/styles/default.css Many thanks Peter __ 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] Site Check please
Ysgrifennodd Peter Bradley: Could someone please check just the home page for me at: http://www.sarahbutler.org.uk/index.html Sorry to reply to myself, but I've sorted it. It *was* a screen-size thing. I checked it out on my wife's eee PC. I've now given the photo a width of 80% and it sizes nicely. If anyone has any comments on the site, though, I'd be very pleased to get any feedback. I'm a bit of a newbie to this CSS stuff, so any suggestions would be very gratefully received. Thanks Peter __ 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] Site Check please
Ysgrifennodd Konstantin Kuchugurin: Piter try this p div style=position:relative;float:left;margin:10px 10px 0px 0px;width:Your_Pic_Width_Size_px;height:Your_Pic_Height_Size_px;img src=image_folder/Your_Image.jpg alt= //div Some text ... Much more text... :) /p This will be fixed your problem (I Think) - just look at http://www.alicante.ru/document_view.htm?did=6 (it site on russian) but you can view code. May be it will hekp you solve your problem. Best regards Constantine Thanks Constantine. You beat me to it. I discovered that giving the photo a width of 80% sorted it. Still works in IE6 as well - which is a relief. Cheers Peter __ 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] Site Check please
Ysgrifennodd David Laakso: Kind of like a long line measure at 116.5 dpi. Sorry for being thick, but I don't understand that. It's a bit of terminology I've missed, I think. Pixel font-sizes are not very user friendly. Yes, you're absolutely right. I hadn't realised I'd done that. Must have been my evil twin. It wasn't hurting much since everything thereafter was relative, but it's unnecessary and I've changed it to 80%. There are a couple of other things I've noticed, which someone might be able to help with: * Is there any way of stopping the navigation menu from wrapping when the screen size gets smaller. I'd prefer horizontal scroll bars, if it's possible * In IE6, the menu items twitch to the left when they're first pointed at. I'm not terribly worried about IE6, but it would be nice to stop it if it can be done. * Also in IE6, the clickable area has not expanded to include the entire 'button'. Is it impossible to make IE6 do that? I look at Sarah, and I've got Georgia[1] on my mind... [1] at default :-) Should I tell her? Thanks for taking the time to comment. Peter __ 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] Site Check please
Ysgrifennodd David Laakso: Let's just say, for the sake of simplicity, that the length of the lines of primary content text (measure) may be a little long for those who view the page at screen resolution 1280 and higher (particularly in laptops). Ah. OK. Got you. I agree, as well, but can't persuade my client. :( Peter __ 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] Site Check please
Ysgrifennodd David Laakso: re: http://www.sarahbutler.org.uk/index.html One way of doing some of that stuff is to set min/max width and shove the menu to the left. A work around for min/max for IE/6 is needed (6 does not support min/max). This will avoid the h-scroll bar. The menu will not wrap, except with heavy-hand font-scaling, and in a window less than 800. And the line-measure will be more appropriate, even at upper resolutions. Please see: http://www.chelseacreekstudio.com/ca/cssd/sb.htm (additions to cc's in head of document) css revision and additions http://www.chelseacreekstudio.com/ca/cssd/sb_files/default0.css Work around method for IE/6 lifted from here [1]. Read Georg's documentation carefully, paticularly regarding Author's font size declared on html, body or wrapper-division. [1] http://www.gunlaug.no/tos/moa_12a.html Thanks David. I persuaded my client to at least look at the menu over to the left. So I think I'll wait and see how that turns out before trying anything else. I don't want to spend too much time on IE6 workarounds, so if she goes with the left justified menu and that deals with some of the IE6 problems I might leave it at that. It's not as if it's unusable. Cheers Peter __ 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] text-decoration
Bob Meetin wrote:
See: sample link at:
www.dottedi.biz/codesamples/misc/text-decoration.html
I'm wondering why I cannot seem to override the natural link underline
by using a span setting text-decoration to none as in:
a href=http://www.mysite.com; target=_newMysite.com span
style=text-decoration: none; - Service and Repair of Broken and
damaged HTML code/span
Basically I want the Service and Repair to not be underlined. Seems
pretty simple but...
Hi
The text is underlined because it's an anchor (link). So your style
needs to be on the anchor.
In-line styles are usually a really bad idea, by the way. Much better
to use a stylesheet, something like this (off the top of my head):
a.service {
text-decoration: none;
}
And then in your HTML:
a class=service href=http://www.mysite.com; ...Service and Repair
... /a
Something like that anyway.
You'll also need to think about how to indicate to your users that it's
a link.
Cheers
Peter
__
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] [Fwd: Re: Confused noob! div is different IE or FF]
Sorry. Forgot that TBird needs Reply to All. Peter __ 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] IE Layout problems
Ysgrifennodd Gunlaug Sørtun:
Peter Bradley wrote:
Whilst I've got your attention, though ... Does anyone happen to
know why IE leaves a big gap between the top_nav and the pennawd_gw.
The effect of 'hasLayout' triggers on div#cynnwys - 'width' and
'height', which makes the container clear the ul#top_nav as a block.
No sane browser will copy that buggy behavior, but they have of course
copied it into IE7.
You'll get a cross-browser reliable start by adding / correcting to...
div#cynnwys {clear: both; height: auto;}
...and adjust the 'top: 70px' to taste. The clearing get browsers in
line, and the 'height' shouldn't be there in the first place.
Setting 'height: value' on an element containing text, is always a bad
move since it'll cause overlapping. If you want a minimum height, then
you should declare one - with workaround for IE6...
div#cynnwys {min-height: 1600px;}
* html div#cynnwys {height: 1600px;}
With div#cynnwys fixed in place below the ul#top_nav, you can move the
main content and/or the left-side container up and down as you like.
This leaves you with one problem in IE6 - the quirky box-model. Since
IE6 is in quirks mode it'll include the left padding in 'width: 78%',
while other browsers will add the left padding to that width. Either
delete the 'xml declaration' from above the 'doctype' and let IE6 run in
Strict mode, or make IE6' box-model look right by feeding it another
'width: value'.
regards
Georg
Hi Georg and list,
First off, thanks for the fix for the list element. That's fine now.
Your reply above is quite a bit for me to digest, but I think I get
what you're saying (especially the bit about fixed heights not being a
good idea). I'll give some thought to what you've said to make sure I
understand, and then I'll give it a go.
Before I forget to say it, I'd like to thank you for taking the time
to explain the whys as well as the whats. Learning is so much more
effective when the learner gets to know why things happen like they
do. Thanks.
Now let's see if I can actually get it to work!
Cheers
Peter
Sorry to reply to myself.
Just to say that everything now works for all browers except IE6. I've
fixed most of the IE6 problems (by omitting the xml declaration, as
suggested, and by doing some modifications to fix the IE6 white space
bug - that I read about in a book that I have): but I'm just left with
one last problem.
IE6 doesn't appear to be picking up the styling for the h1 element in
the #pennawd (right navigation) div, because it doesn't apply the
background colour. More seriously, though, it appears to be trying to
put the h1 element in the div with a wide left padding or border (I
don't know which), and this pushes the left navigation column (#pennawd)
out to the right by about 190px, covering some of the content in the
main content area.
I've made quite a few changes to the stylesheet in the course of this
exercise, so anyone who is kind enough to reply might like to take a
look at the stylesheet as it is now, first.
http://www.peredur.uklinux.net/Amnesty/styles/default.css
For test purposes, the best pages to check are:
http://www.peredur.uklinux.net/Amnesty/amdanom.html
http://www.peredur.uklinux.net/Amnesty/newyddion.html
(The others are still too much of a work in progress to be any help)
If I have to, I'll leave IE6 users to fend for themselves; but from a
professional point of view I'd rather not. There are still quite a few
of them, I understand. How many of them are Welsh-speaking is another
matter :-)
Thanks
Peter
__
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] IE Layout problems
Ysgrifennodd Gunlaug Sørtun:
Peter Bradley wrote:
Whilst I've got your attention, though ... Does anyone happen to
know why IE leaves a big gap between the top_nav and the pennawd_gw.
The effect of 'hasLayout' triggers on div#cynnwys - 'width' and
'height', which makes the container clear the ul#top_nav as a block.
No sane browser will copy that buggy behavior, but they have of course
copied it into IE7.
You'll get a cross-browser reliable start by adding / correcting to...
div#cynnwys {clear: both; height: auto;}
...and adjust the 'top: 70px' to taste. The clearing get browsers in
line, and the 'height' shouldn't be there in the first place.
Setting 'height: value' on an element containing text, is always a bad
move since it'll cause overlapping. If you want a minimum height, then
you should declare one - with workaround for IE6...
div#cynnwys {min-height: 1600px;}
* html div#cynnwys {height: 1600px;}
With div#cynnwys fixed in place below the ul#top_nav, you can move the
main content and/or the left-side container up and down as you like.
This leaves you with one problem in IE6 - the quirky box-model. Since
IE6 is in quirks mode it'll include the left padding in 'width: 78%',
while other browsers will add the left padding to that width. Either
delete the 'xml declaration' from above the 'doctype' and let IE6 run in
Strict mode, or make IE6' box-model look right by feeding it another
'width: value'.
regards
Georg
Hi Georg and list,
First off, thanks for the fix for the list element. That's fine now.
Your reply above is quite a bit for me to digest, but I think I get what
you're saying (especially the bit about fixed heights not being a good
idea). I'll give some thought to what you've said to make sure I
understand, and then I'll give it a go.
Before I forget to say it, I'd like to thank you for taking the time to
explain the whys as well as the whats. Learning is so much more
effective when the learner gets to know why things happen like they do.
Thanks.
Now let's see if I can actually get it to work!
Cheers
Peter
__
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] IE Layout problems
Hi, I'm sure this is a common problem. I've seen quite a few similar posts in the archives, but nothing that I recognised as being of direct help. If I've missed something, please point me at the right place and I'll bother you no more :0) My basic problem is that I have a layout that works in every browser I can lay my hands on across two operating systems, but doesn't work in IE7 (so almost certainly not in IE6 either). An example of the problem can be seen at: http://www.peredur.uklinux.net/Amnesty/amdanom.html The style sheet can be retrieved from: http://www.peredur.uklinux.net/Amnesty/styles/default.css For some reason, IE insists on pushing the ul that forms the sidebar navigation links out about 10px to the right. And yes, I did pinch the style from Sitepoint. This is a non-work project (I do Web programming, but not Web designing, so I know my way around, in a general sort of way without being all that familiar with markup and style sheets) to translate a site. I really want to get to grips with this CSS thing, if I can. This is the first time I've really used them. The site is under construction and not in its final resting place, so there's only really this one page to look at, and the home page which doesn't have a sidebar. The other pages, such as they are, are just placeholders. Thanks in advance for any help you can give. Regards Peter __ 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] IE Layout problems
Ysgrifennodd Gunlaug Sørtun:
Add...
ul#cyfeirio {margin-left: 0;}
...or...
ul#cyfeirio {margin: 0;}
...depending on where you want that ul to stay.
IE/win uses margin-defaults on lists, while most other browsers use
padding-defaults. It is therefore a good practice to zero out both
margins and paddings that aren't used/declared for positioning of lists.
D'oh! I really should have worked that out for myself. Thanks Georg.
Whilst I've got your attention, though ... Does anyone happen to know
why IE leaves a big gap between the top_nav and the pennawd_gw. I
notice that all the other browsers leave a large gap between the top
of the cynnwys and the start of the first included p or h1/2. It seems
that IE is making the pennawd_gw and the cynnwys content line up (which
is actually what I would like), but moving everything down about 30px
(which is not), whilst all the other browsers have the content moved
down (which is not what I would like), but not the pennawd_gw (which is).
I'll have to stop for tonight (my head's done in), but I'll fix the ul
tomorrow and confirm all is well. If anyone does know what the other
problem is I'd be delighted to hear that as well. If it would help to
post that as a separate question, I'll do that, as it might make it
easier for anyone else with the same problem. Just let me know if you
think I should re-post with a new title.
Thanks.
Peter
__
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/
