[css-d] Newbie text ghosts and alignment
Hi, I have run into a number of problems as can been seen: http://www.somersetspiess.co.uk/xmas.html Within a Div are many Div's which each contain an image and comment each in a limited range of sizes. Right at the bottom (in IE7 and around 1971-2 and '69) ghost text -partial comment -and a blank space appears. I guess that this might be an accumulative sizing error. Can anyone confirm and point me in the direction to sort this out please. At the head between 2 h2 is a Div and within are 2 Div 's, one for images and one for text. Within the text Div there are 3 Divs that each contain a block of text (and li). After much fiddling the layout is ok (in IE7) but the remainder lines of text are indented. Can anyone point me in the right direction to align all the text left please. In IE7 Ive got it, using left:float, looking - not bad - but it all goes to pot in Gecko mode. Flummoxed, any suggestions how to achieve this layout properly (not too techy) appreciated. Confessions: Not IE6 compatible - yet Not laptop friendly, width limits 760 - 1200 Tony __ 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 Problem (naturally!)
Greetings! I finally finished this website and everything works perfectly on all browsers (Win Mac) except for IE 6 and 7 on Windows. I have a graphic decoration at the bottom of each of the following two pages and have used CSS margin-left to position them, but IE doesn't seem to recognize the margin and places the graphic on the left side of the screen. I tried fiddling with the padding as well, but then everything got very messed up. Here are the pages with problems: http://www.boletta.com/aau/book.html http://www.boletta.com/aau/type.html Here is the external stylesheet: http://www.boletta.com/aau/portfolio.css I can't figure out what causes this to happen in IE or if I am doing something wrong in CSS (or XHTML). All of the HTML is valid. I also checked all the embedded and external stylesheets at WC3 and the CSS is all valid. I am stumped. Any help would be appreciated. Thanks, Bill Boletta __ 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-7 not seeing margin/height in header...
Simple one page site that is using a large barkground for my layout. Looks great in FF and Safari. Noticed that IE6-7 is not liking my header height or margin to keep it out of the header area. Also applied to the content div. Tried applying margins to the logo and the header which works but adds a large gap in FF and Safari. Site: http://www.kucia.com/kucia/concentrate/ CSS: http://www.kucia.com/kucia/concentrate/conmain.css HTML CSS are valid. Any thoughts would be great. Thanks Eric __ 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] tr, td, th, and caption
The XHTML 1.0 DTD makes clear that the table element is a block element. No surprise there. However, the tr, td, th, and caption elements are not listed in either the Block section or the Inline section. How do I know what type of elements these elements are? Thanks for any input. ... doug __ 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] IDs on W3C.org
On Mon, Nov 10, 2008 at 4:09 PM, Tim Arnold [EMAIL PROTECTED] wrote: I often find myself using classes where I would normally use IDs when coding templates for any number of .NET-based content management systems. Many .NET controls output system-generated IDs which forces us to use classes instead. It bugs me every time, but there's not really much to do about it, from what I understand. Worse is having to deal with the nightmare of embedded tables used for layout in many of the .NET controls. Very, very ugly. Hey Tim, I too develop in .NET, and when working with the built-in controls, I find this to be helpful: http://www.asp.net/CssAdapters/ Doesn't solve the ID issue, but it does solve the layout problem. -Jerod Venema __ 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-7 not seeing margin/height in header...
Eric Heitz wrote:
Simple one page site that is using a large barkground for my layout. Looks
great in FF and Safari.
Noticed that IE6-7 is not liking my header height or margin to keep it out of
the header area. Also applied to the content div.
Tried applying margins to the logo and the header which works but adds a
large gap in FF and Safari.
Site: http://www.kucia.com/kucia/concentrate/
Eric
Cursory checked local only XP IE/6, XP IE/7; and Mac Opera, Sarari, and FF.
#container {
border: 1px solid blue/*4 position only*/;
overflow:hidden/*add to open and enclose floats*/;
}
#header {
border: 1px solid red/*4 position only*/;
height: /*130px*/178px;
/*min-height:130px;not needed*/
/*margin:0;not needed*/
/*padding:0;not needed*/
}
h1.conLogo {
border: 1px solid red/*4 position only*/;
height:/*72px*/73px;
margin-top:/*70px*/103px;
}
#content {
border: 1px solid red/*4 position only*/;
}
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] tr, td, th, and caption
Doug Jolley wrote: The XHTML 1.0 DTD makes clear that the table element is a block element. Not really. Both in HTML 4.01 and in XHTML 1.0, the concept of block element is obscure or at least vague, and it cannot be defined by the DTD, which is purely a formal description of some features of markup syntax, However, the tr, td, th, and caption elements are not listed in either the Block section or the Inline section. How do I know what type of elements these elements are? You don't, really. But neither need you, for the purposes of CSS styling. In CSS terms, we can more or less expect browsers to treat elements according to the Default style sheet for HTML 4 in CSS specs, roughly speaking, at least as applies to display property values. There you have display: table-row for tr, etc.; check http://www.w3.org/TR/CSS21/sample.html In CSS, elements have different values for the display property. The HTML concept of block element or inline element is, as such, irrelevant and invisible. It affects CSS indirectly only, via the default display property value. Note: IE, though it has a surrogate for an excuse for a primitive support for HTML tables, does not support table related CSS properties. You can more or less imagine that it has fixed property values for table-related elements as per the default style sheet, and you can't change such an element to something else or vice versa via CSS, in any manner that could be expected to work reliably (read: on IE as well). -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ 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] Newbie text ghosts and alignment
tony wrote: I have run into a number of problems as can been seen: http://www.somersetspiess.co.uk/xmas.html Tony Might be a good idea to start by validating the markup. Compare your page in IE/7 (and IE/6) to Opera. http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.somersetspiess.co.uk%2Fxmas.html -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] :: IE7 Margin Issue ::
Hello Friends I am facing weird margin issue in IE7 whereas things are fine otherwise. http://demo.awayback.com/maknetforms/ There is another problem around the main menu in IE7. The bottom border sticks with the menu. Pls help. Regards, Amrinder www.awayback.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Unwanted margin with 0pix padding and margin
This is the most basic of basic, yet I can't see the problem. This is my first post here, so please let me know if I'm out of protocol somehow. http://www.labontewebstudio.com/web210-index-scratch.css http://www.labontewebstudio.com/web210-index-scratch-2v.htm Question: Why do I get what appears to be padding or margin around the div #content? - Every div is set to 0pix padding and margin - The #footer doesn't have a margin, but is set the same as #content Thanks, Elaine __ 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] Complete Stylesheet for Each IE Version - No Trickle Down
Melbeach wrote: Each IE version can now be targeted in complete isolation. Benjamin Hawkes-Lewis wrote: Another advantage of this approach is that each IE version only has to download one stylesheet, rather than two or three or four, so that's fewer HTTP requests. Exactly. If you think about the average IE6 user. This user is probably most likely of the bunch to still be using a dial-up connection. Using the usual linking methods, this IE6 dial-up scenario will request up to four separate stylesheets. Of all scenarios, this is the one I would least like to be required to request four stylesheets. Using the method discussed, this IE6 dial-up scenario only needs to request one stylesheet. Melbeach wrote: So I'm wondering if any of the experts here see a problem with doing this. My main concern is that some obscure low-tech browser might see this !--[if !IE]!-- and go into some sort of infinite loop routine, burning up the old cpu. Benjamin Hawkes-Lewis wrote: That would definitely be a bug in the browser, not your code, and such a browser would be unlikely to handle common web content. Makes sense. I only have one website and it's a work-in-progress at the moment. So it was no big deal converting what I had to this method. If I was a pro web designer with hundreds of sites under my watch, I would probably be alot more skeptical about all of this. -Kyle __ 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] Unwanted margin with 0pix padding and margin
On Tue, 11 Nov 2008 20:53:18 -, Elaine LaBonte [EMAIL PROTECTED] wrote: Question: Why do I get what appears to be padding or margin around the div #content? In Opera all I can see is the blue border round the #container div, no margin or padding though. -- Using Opera's revolutionary e-mail client: http://www.opera.com/m2/ __ 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 Problem (naturally!)
On 11 Nov 2008, at 08:58, wlb wrote:
I have a graphic decoration at the bottom of each of the following
two pages
and have used CSS margin-left to position them, but IE doesn't seem to
recognize the margin and places the graphic on the left side of the
screen.
I tried fiddling with the padding as well, but then everything got
very
messed up.
Here are the pages with problems:
http://www.boletta.com/aau/book.html
http://www.boletta.com/aau/type.html
Here is the external stylesheet:
http://www.boletta.com/aau/portfolio.css
I'm sure someone will be along to explain the reason for the
ineffective margin but this should do the trick:
#ornament_3 {
background: transparent url(pix/ornament_3a.png) no-repeat scroll
center 50%;
height:100px;
margin:0 auto;
}
and the same sort of thing for #ornament_2.
Regards
Jonny
__
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] Same Dynamic Width
Any suggestions on how to make two items have the same dynamic width? For example, if I have two divs with one being a header and a second with content. I want to make the header div expand to fill the same width as the content div. I have tried enclosing both in a parent div and giving the content div a max-width and min-width, and I want the header to match whatever width that actually ends up being. If I set the width of the header to 100% then the container expands beyond the width of the content div, and so does the header div. Thanks, __ 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] CSS Wrap background problem
Hi there, I am trying to include a 'background' on the left and right hand sides of my square wrap container in Divs. Currently my HTML is as follows : div id=wrap div id=header /div div id=navbar /div div id=content /div div id=footer /div /div I tried to do the following: div id=wrapleftbg //Div Style background:url(images_03.jpg); background-repeat:no-repeat; width:37px; height:448px; top:85px; left:400px; position:fixed; /div div id=wrap *other divs* /div div id=wraprightbg //Div Style background:url(images_04.jpg); background-repeat:no-repeat; width:37px; height:448px; top:85px; left:400px; position:fixed; /div But it didn't work - resizing the browser caused the left and right bg divs to act weird. My wrap style is : width: 800px; margin: 0 auto; I would be grateful if someone could help me out with this problem. Thanks, Nouhad. __ 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] Same Dynamic Width
Jack Blankenships wrote: Any suggestions on how to make two items have the same dynamic width? I can think of at least a dozen reasons why neither 'width: auto'(default) or 'width: 100%' will work for you, but figuring out which one you have run into will be pure guesswork. Present a link to your creation, so we can see what other styles you have in there. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Problem (naturally!)
On 11 Nov 2008, at 09:37, Jonny Stephens wrote:
On 11 Nov 2008, at 08:58, wlb wrote:
I have a graphic decoration at the bottom of each of the following
two pages
and have used CSS margin-left to position them, but IE doesn't
seem to
recognize the margin and places the graphic on the left side of the
screen.
I tried fiddling with the padding as well, but then everything got
very
messed up.
Here are the pages with problems:
http://www.boletta.com/aau/book.html
http://www.boletta.com/aau/type.html
Here is the external stylesheet:
http://www.boletta.com/aau/portfolio.css
I'm sure someone will be along to explain the reason for the
ineffective margin but this should do the trick:
#ornament_3 {
background: transparent url(pix/ornament_3a.png) no-repeat scroll
center 50%;
height:100px;
margin:0 auto;
}
Oops... IE7 needs width too...
#ornament_3 {
background: transparent url(pix/ornament_3a.png) no-repeat scroll
center 50%;
height: 100px;
margin: 0 auto;
width: 182px;
}
Jonny
__
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] Same Dynamic Width
http://mylittletestsite.com/same_dynamic_width.html In theory the first section should have the header stop at 800px. The second should stop at 400px for both the header and the content. On Tue, Nov 11, 2008 at 3:23 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Jack Blankenships wrote: Any suggestions on how to make two items have the same dynamic width? I can think of at least a dozen reasons why neither 'width: auto'(default) or 'width: 100%' will work for you, but figuring out which one you have run into will be pure guesswork. Present a link to your creation, so we can see what other styles you have in there. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Unwanted margin with 0pix padding and margin
Elaine LaBonte wrote:
This is the most basic of basic, yet I can't see the problem. This is my
first post here, so please let me know if I'm out of protocol somehow.
http://www.labontewebstudio.com/web210-index-scratch.css
http://www.labontewebstudio.com/web210-index-scratch-2v.htm
Question: Why do I get what appears to be padding or margin around the div
#content?
- Every div is set to 0pix padding and margin
- The #footer doesn't have a margin, but is set the same as #content
Thanks,
Elaine
Only the body declaration needs margin: 0; padding: 0; to get
cross-browser default. Divisions have no margin or padding by default so
you can delete margin: 0; padding: 0; from all of them.
In the markup set the text in p tags:
p#sidebarLeft/p
p#mainContent/p
p#footer/p
Add this ruleset to kill the p margin and the line-height will tighten
in IE/6 and IE/7. And the height of the parent container will be the
same in the IE's as in compliant browsers ( think):
p {margin: 0;line-height:1;}
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Same Dynamic Width
Using display: inline-block seems to work for now, but I am wondering what circumstances may cause that to fail. On Tue, Nov 11, 2008 at 3:40 PM, Jack Blankenships [EMAIL PROTECTED] wrote: http://mylittletestsite.com/same_dynamic_width.html In theory the first section should have the header stop at 800px. The second should stop at 400px for both the header and the content. On Tue, Nov 11, 2008 at 3:23 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Jack Blankenships wrote: Any suggestions on how to make two items have the same dynamic width? I can think of at least a dozen reasons why neither 'width: auto'(default) or 'width: 100%' will work for you, but figuring out which one you have run into will be pure guesswork. Present a link to your creation, so we can see what other styles you have in there. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Same Dynamic Width
- Original Message - From: Jack Blankenships [EMAIL PROTECTED] To: Gunlaug Sørtun [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: Tuesday, November 11, 2008 4:40 PM Subject: Re: [css-d] Same Dynamic Width http://mylittletestsite.com/same_dynamic_width.html In theory the first section should have the header stop at 800px. The second should stop at 400px for both the header and the content. On Tue, Nov 11, 2008 at 3:23 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Jack Blankenships wrote: Any suggestions on how to make two items have the same dynamic width? Georg wrote: I can think of at least a dozen reasons why neither 'width: auto'(default) or 'width: 100%' will work for you, but figuring out which one you have run into will be pure guesswork. Jack: The page is doing exactly what you are asking it to do. Since you have no constraints on the width of the container or header, the block-level container auto-expands to fill the viewport, and the block-level header auto expands to the width of the container. Try changing in your styles, .content to .container and see what happens. Bottom posting per convention. Best Regards, Peter www.fatpawdesign.com developing in: WinXP/SP2 + FF3.0.3 at 1024x768 and 1280x1024 checking in: IE8.0beta/O9.61/Av11.6/Cr0.2/Orca1.1 In God we trust, all else bring data... __ 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] Same Dynamic Width
Jack Blankenships wrote: Using display: inline-block seems to work for now, but I am wondering what circumstances may cause that to fail. http://mylittletestsite.com/same_dynamic_width.html I would have preferred a valid document, and not an incomplete, quirks mode triggering, fragment. IE/win is at IE5.5 CSS support level when served something like that. You want the .container to shrink-wrap to its width-controlled content and thereby control width of its auto-expanding content. Divs don't shrink-wrap by default - they auto-expand. Shrink-wrap styling - like 'display: inline-block' - is not reliable across browser-land. Slightly older Geckos need an alternative, and if you add 'hasLayout' triggers to any content IE7 will be completely lost. Peter has already given the most reliable solution for such cases. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Thanks for resizing my window -- NOT!
All the recent browsers I have let you open a page in a tab within the browser window. You can usually set an option that a page opens within a tab even as a result of code or whatever that tries to open a new page. And that's something we all need to watch. Sitepoint, our very favouritist web books publisher, has a number of forms and confirmation dialogues, etc. that open in a new window -- except in my set-up, it's tabs. These new pages thoughtfully resize to a very small size but, unfortunately, resize the entire window plus all the tabs. A recent transaction made me expand the window to its normal size 5 times (count 'em) as each new page shrunk the window. Sitepoint are aware of the irritation and are fixing it. But it is something we need to cater to by floating a small page within the canvas of the viewport, instead of attempting to resize the window. Wednesday's Words of Wisdom over Regards, Hedley -- Hedley Finger 28 Regent Street Camberwell VIC 3124 Australia Tel. +61 3 9809 1229 Fax. (call phone first) Mob. (cell) +61 412 461 558 Email. Hedley Finger [EMAIL PROTECTED] __ 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/
