 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / March 2007works with IE but not Firefox
hi there, I used css for a page, it worked but only in IE not in firefox. What DOCTYPE whould I use for firefox. the external stylesheet contains the following: body { background-color: AEB4C0; border-width:thin; text-align:left; } #container { margin-left: 0px; margin-top:30px; text-align:center; width: 95%; } #work{ height:400 px } .overlap { float:right; width: 450px; height: 350px; background-image:url(../images/background2.gif); } .sw { position: relative; top: -315; left: 0; z-index: 2; } .center { margin-top: 37.5px; margin-left:0px; text-align:center; } .box2 { float: right; width: 450 px; height: 170 px; background-image:url(../images/background3.gif); background-repeat:no-repeat; text-align:center; margin-left:0px; margin-top:0px; margin-right:0 px; margin-bottom:10px; } .box { display:inline; width: 390 px; height: 170 px; background-image:url(../images/background.gif); background-repeat:no-repeat; text-align:center; margin-left:0px; margin-top:0px; margin-right:0 px; margin-bottom:10px; } .box, p { padding:10px; text-align:justify; } .send { position:relative; top:15px; left:7px; display:inline; Thanks dangerd schrieb: > I used css for a page, it worked but only in IE not in firefox. Validate your CSS!  SignatureJohannes Koch In te domine speravi; non confundar in aeternum. (Te Deum, 4th cent.) > dangerd schrieb: > [quoted text clipped - 6 lines] > In te domine speravi; non confundar in aeternum. > (Te Deum, 4th cent.) Thanks for your reply Johannes, can you explain what you mean by 'validate your css'. thanks dangerd schrieb: > Thanks for your reply Johannes, can you explain what you mean by > 'validate your css'. Use the W3C's validation tool for CSS (<http://jigsaw.w3.org/css-validator/>) to find errors in your code. Errors in code are one of the main reasons why code is not rendered similarly in browsers. SignatureJohannes Koch In te domine speravi; non confundar in aeternum. (Te Deum, 4th cent.) > I used css for a page, it worked but only in IE not in firefox. IE silently corrects errors (HTML and CSS) that better browsers correctly reject. Fix these errors first. > What DOCTYPE whould I use for firefox. You don't, you use a doctype for web authoring in general. Start to think about "coding for a particular browser" and you're already lost. So use the right doctype declaration, but do it because it's the right one, not just because FF wants you to. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd" > Also you'll get better results by posting URLs, not snippets. > > I used css for a page, it worked but only in IE not in firefox. > [quoted text clipped - 12 lines] > > Also you'll get better results by posting URLs, not snippets. thanks for ur input, much appreciated. I could not post URL for security reasons but I take your point. >> Also you'll get better results by posting URLs, not snippets. > > thanks for ur input, much appreciated. I could not post URL for > security reasons but I take your point. Security might prevent you from pointing to the actual page you're working on. But *nothing* prevents you from creating a publicly-visible page with the minimum code necessary to illustrate the problem you're having, and posting the URL for that page. Creating such a "problem page" is a useful debugging technique in any case, even if it's for your own use only. In my experience, narrowing down a problem so as to recreate it often leads to the solution. It's easy to lose the forest in the trees, and creating the "problem page" helps bring the problem into focus. sherm-- SignatureWeb Hosting by West Virginians, for West Virginians: http://wv-www.net Cocoa programming in Perl: http://camelbones.sourceforge.net > >> Also you'll get better results by posting URLs, not snippets. > [quoted text clipped - 17 lines] > Web Hosting by West Virginians, for West Virginians:http://wv-www.net > Cocoa programming in Perl:http://camelbones.sourceforge.net Ok guys, my eyes are bloodshot and I am slowly rendering myself bold, there is the URL: http://multidome.co.uk/test/gallery.php Does anybody know why this works with IE but not with Firefox. Incidently the boxes align correctly on Firefox when the width of the window is narrowed. I would really appreciate if someone cracks this. Duncs In article <1174946724.968414.130710@y80g2000hsf.googlegroups.com>, > > >> Also you'll get better results by posting URLs, not snippets. > > [quoted text clipped - 10 lines] > > I would really appreciate if someone cracks this. Perhaps you could look the 13 errors showing at: <http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmultidom e.co.uk%2Ftest%2Fgallery.php> for the html. BTW, when the width of the window is narrowed in FF, all hell breaks loose. Why have you got: <body> </body> </html> immediately after the head element ends? Why are your eyes so bloodshot, you should know by now how to live a good, clean, wholesome life. Signaturedorayme > http://multidome.co.uk/test/gallery.php > > Does anybody know why this works with IE but not with Firefox. It will never "work" as long as you set the dimensions of text elements in px units. All it takes is for the visitor to use a different font than you to make it fall apart. A larger font size makes matters worse. When an explicit height is set, IE6 erroneously treats it as min-height and expands the element to fit whatever text there is. Other browsers, including IE7 in standards mode, limit the height as you set it so the contents overflow. Your DOCTYPE is triggering quirks mode, though, so IE7 does the same bad things IE6 does. http://www.hut.fi/u/hsivonen/doctype.html If you are trying to keep the same vertical height of the text boxes and the image, I suggest giving it up now. Accept the fact that you have no control over the visitor's display and just let text boxes size themselves as needed. You'll get more consistent (and usable) results across browsers and save yourself a load of frustration. > Incidently the boxes align correctly on Firefox when the width of the > window is narrowed. Not really. http://www.bergamotus.ws/screenshots/multidome.co.uk.png BTW, that is my default font and font size you see there, as well as my usual window width. SignatureBerg > >http://multidome.co.uk/test/gallery.php > [quoted text clipped - 26 lines] > -- > Berg Berg, Thanks for your input, I have a questions: >"it will never "work" as long as you set the dimensions of text elements in px units" How else am i supposed to make sure that the text and forms do not spill out of the background image(the light grey boxes)? by the way, the stylesheet is here: http://multidome.co.uk/css/gallery2.css Thanks > >"it will never "work" as long as you set the dimensions of text elements in px units" > > How else am i supposed to make sure that the text and forms do not > spill out of the background image(the light grey boxes)? Test is always sized relative to em units, because that's pretty much their definition. Text has a varying size relationship to the size of a pixel. This text/pixel ratio varies widely between different users, or for a user changing default text sizes. So if you size the "things that are connected with text" (i.e. your text container boxes) using ems, then they will re-size themselves to always contain that amount of text. As text / pixel ratio varies, the box changes in (pixel-) size to keep up. If you have a box that's more intimately connected with an image, then you might want to size it in pixels, as that tracks the image size. If there's text in there too, expect it to grow and expand downwards. Placing pixel-sized and em-sized units side-by-side under the same parent can get awkward. In general, don't size things at all. Try to avoid sizing things you don't care that much about. Size things you _do_ care about (such as narrow margins) and let the browser's renderer sort the rest out for you upon display. If you set the image container size and the spacing between the boxes, then you can probably just let thee other boxes expand to fill the remaining space. Read http://brainjar.com/css/positioning/ before using float:, position: or negative units. > > >"it will never "work" as long as you set the dimensions of text elements in px units" > [quoted text clipped - 26 lines] > Readhttp://brainjar.com/css/positioning/before using float:, > position: or negative units. Thanks for your insight, you mentioned that: "So if you size the "things that are connected with text" (i.e. your text container boxes) using ems, then they will re-size themselves to always contain that amount of text." How am I supposed to make sure that text never flows out of a 450px width by 170 px height box containing a background image which is just that size? Thanks First of all, fix the invalid markup, especially the spurious </body></ html> You can't expect to make efficient progress with layout without clearing this sort of issue out of the way first. It _might_ work, but you lose the ability to expect it to work reliably. Use meaningful class names too, not just "box" > "So if you size the "things that are connected with text" (i.e. your > text container boxes) using ems, then they will re-size themselves to [quoted text clipped - 3 lines] > width by 170 px height box containing a background image which is just > that size? There are several questions hiding in here: * To stop text flowing out, just don't set the height of the box. Let the browser work it out for itself and it will expand the box vertically as necesary. Don't mess with this until you're knowledgeable about CSS! It'll work better if you just leave it alone. Browsers set box heights better than any author can. They know how big the local text size is today, you don't (and can't). The _results_ of "text flowing out" are controlled by the overflow property. For images this might have an effect sideways, for text it's usually wrapped and so only appears on the bottom edge. This is some sort of trimming though, so it's best avoided by letting the box expand. * Don't set images as backgrounds. If it's an important image (i.e. it's worth printing) then use an <img> tag instead. Leave the CSS background-image property for "wallpaper", not "content". * Don't use "dumbnails". Your image is 400px wide and ought to be about 30k in size. It's actually 2/3rd of a MB and you're resizing it in the browser. This looks ugly and takes an age to download. * If the box is intended to contain an image (your class "overlap"), then set it to a width in pixels (as you're doing). Then throw text into it, sized in ems, and let the browser work out the best height. * If the box is intended to contain text (classes "box" and "box2"), then set the width in ems. Let the browser work out the height. > First of all, fix the invalid markup, especially the spurious </body></ > html> [quoted text clipped - 42 lines] > * If the box is intended to contain text (classes "box" and "box2"), > then set the width in ems. Let the browser work out the height. Thanks Andy, If I am not to use pictures for the boxes' background, how am i supposed to overlay the text onto <im> elements? Duncs > > First of all, fix the invalid markup, especially the spurious </body></ > > html> [quoted text clipped - 49 lines] > > Duncs I am beginning to lose faith in CSS; I simplified it massively and it I still does not work. Can anyone point out why the two bottom boxes don't align properly in FF? url: www.multidome.co.uk/test/gallery.php css: www.multidome.co.uk/css/gallery2.css Many thanks. > I am beginning to lose faith in CSS; Understanding CSS doesn't happen overnight. It takes study, practice and patience to become proficient. You have to work at it, though. Don't give up when you're just getting started. > Can anyone point out why the two bottom boxes don't align properly in > FF? > > url: www.multidome.co.uk/test/gallery.php Please define "align properly". It doesn't adapt so well to smaller windows, but I don't know if that's what you mean. SignatureBerg > > I am beginning to lose faith in CSS; > [quoted text clipped - 12 lines] > -- > Berg Thanks for the moral support Berg! I am resigned to the fact that CSS is not as easy as I thought (I now view it as equally challenging as PHP, never would have thought so a week ago). I bought myself the Eric Meyer book and will be giving it some time. > Please define "align properly". It doesn't adapt so well to smaller > windows, but I don't know if that's what you mean. What I am looking for is two small boxes on top of each other to the left of the page with a large image box floated to the right the two smaller boxes. Underneath all of three of these items, there should be two small boxes aligned horizontally (that is where the problem is). Duncs Like this: o oooo o oooooooooooo o box1 o oooooooooooo o oooo o ooo box3 ooo oooooooooooo o oooo o oooooooooooo o box2 o oooooooooooo o oooo o oooooooooooo o oooo o oooooooooooo o box4 o ooo box 5oooo o oooo o oooooooooooo >>Please define "align properly". It doesn't adapt so well to smaller >>windows, but I don't know if that's what you mean. >> >>-- >>Berg If Google Groups doesn't trim signatures automatically, please get in the habit of doing it manually. >>Please define "align properly". It doesn't adapt so well to smaller >>windows, but I don't know if that's what you mean. You don't have to quote twice; just insert your comments on a line following what your talking about. Delete the rest > What I am looking for is two small boxes on top of each other to the > left of the page with a large image box floated to the right the two [quoted text clipped - 14 lines] > o box4 o ooo box 5oooo > o oooo o oooooooooooo Ah! Finally, a description of the problem! (Although I will snidely remark that if you can't even get the diagram right with little o's, you probably won't be immediately successful with CSS.) So, from your written description you really want three elements (for some still-unknown reason), which I will name arbitrarily (since I don't know what your reasons for the design are). One element is a Sidebar, containing Box 1 and Box 2, positioned upper left. A second element is the Picture box, your Box 3, positioned upper right. Lastly you have a Command Bar (which I could have called a Footer, but you might eventually have a real footer somewhere below). The Command Bar contains your Box 4 and Box 5, "underneath all of these items." So try this basic form: <div class="sidebar">My sidebar: Boxes 1 and 2</div> <div class="picture">My picture: Box 3</div> <div class="commandBar">My command bar: Boxes 4 and 5</div> .picture, .sidebar, .commandBar {background-color:#ECEDEE; margin:2em;} .picture { float:right; } .sidebar { float:left; } .commandBar { clear:both; } The clear on .commandBar keeps Boxes 4 & 5 together, always beneath the other two elements. That's probably enough to solve your problem right there. (But I'm too stupid to stop.) So: just fill in the elements you already have, something like this: <div class="sidebar"> <div>Box 1 test text <form action="../admin/storealt.php etc.></form> </div> <div>Box 2 test text <form action="../admin/storealt.php etc.></form> </div> </div> <div class="picture"><img src="../admin/getpicture.php?id=16" alt="Longdome model 17" width="400" height="275"></div> <div class="commandBar"> <div class="addNewPic"> <a href="yadda"> <img src="../button/delete.gif" alt="Deletes the current picture from the database"> </a> </div> <div class="deletePic"> Add new picture to the database. <form method="post" action="" etc.>yadda</form> </div> </div> with CSS like: .picture, .commandBar { background-color:#ECEDEE; margin:2em;} .picture { float:right; padding:20px; -moz-border-radius:2em; } .picture img { width:400px; height:275px; } .sidebar { float:left; padding:0 2em;} .sidebar div { margin:0 0 1em 0; background-color:#ECEDEE; margin:2em;} .commandBar { clear:both; } .addNewPic { float:left; background-color:#ECEDEE; } .deletePic { float:right; background-color:#ECEDEE; } Note that -moz-border-radius is invalid, and used only for mozilla browsers, ignored by others. Square corners in IE isn't so bad, though, as Andy says. Note also that I used <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">, not XHTML transitional. If you insist on staying with XHTML, you'll have to tweak the closing tags. SignatureJohn On Mar 28, 4:54 pm, John Hosking <J...@DELETE.Hosking.name.INVALID> wrote: > >>Please define "align properly". It doesn't adapt so well to smaller > >>windows, but I don't know if that's what you mean. [quoted text clipped - 103 lines] > -- > John Thanks John, I really appreciate all your effort and am amazed by the time people have spent replying. >Although I will snidely > remark that if you can't even get the diagram right with little o's, you > probably won't be immediately successful with CSS.) I had 2 min to do it at the end of my lunch break. > So, from your written description you really want three elements (for > some still-unknown reason), which I will name arbitrarily (since I don't I am doing this for training purposes, this page will not even be accessible to members of the public. I am a new to programming and am just trying to get my head round CSS. I will try and implement your solution now. Duncs > Can anyone point out why the two bottom boxes don't align properly in > FF? Hard to say without knowing what you're expecting them to do. I assume that you mean they look correct for windows between 900 and 960 px wide (with my settings), but badly broken otherwise. You're trying to control something in 2 dimensions simultaneously. Don't do that, it's too hard. It's inherently hard, because it doesn't cope easily with resizing windows. In particular, it leads to implementations based around position:absolute and pixel positioning. This is easy to do, but inflexible (and thus bad). If you want 2d control of positioning, then this is a "grid" layout and is best done using a <table>. You can use CSS simultaneously with it, the two aren't mutually exclusive. Grid layouts are fashionable with graphic designers, particularly the more pretentious. The popular book is Tim Samsara's "Making and Breaking the Grid" <http://www.amazon.com/exec/obidos/ASIN/1564968936/codesmiths-20> (aka "Pointy-bearded Twattery for Fun and Profit") Really this whole bunch of worthless Nathans should go and read the '20s and '30s German texts that are the original source material for the whole style, particularly Jan Tschichold, or even the medieval canons of page layout. In web design, we care a great deal about resizing behaviour. It's easiest to manage this if we split a 2d problem into two stages with one dimension each. Structure your page as 2 columns, as 2 <div>s with float. Embed 5 <div>s inside these, 3 on the left and 2 on the right. Your alignment problems are now handled easily and reliably by containment alone. Use appropriate margins and you've probably got most of the widths under control too. > > Can anyone point out why the two bottom boxes don't align properly in > > FF? [quoted text clipped - 34 lines] > Use appropriate margins and you've probably got most of the widths > under control too. Andy, You are a King amongst men, thank you for taking the time to share your knowledge. I will let you know how I get on. Duncs In <1175030417.182351.194460@d57g2000hsg.googlegroups.com> on 27 Mar 2007 14:20:17 -0700, "dangerd" <duncanelliot@breathe.com> wrote: >I am beginning to lose faith in CSS; Don't. I don't know if it'll help at all but the biggest problem I had - and most problems I've seen other people have - with learning to use CSS are based, not on the difficulties of learning/writing CSS in itself (which is no more difficult than learning anything else) but on the mindsets of the person learning/writing. Most people start out by thinking "how can I reproduce my tables-based layout using CSS?" Short answer - don't even try, it'll break your heart. Trying to port across static page layout concepts to CSS-based dynamic presentation just doesn't work. Been there, tried it, learned through harsh painful experience :) The first thing anyone has to get permanently lodged into their brain is that trying to achieve absolutely uniform pixel-perfect layout across the huge variety of platforms that visitors may be using is a futile task guaranteed to end in tears. If you have a reason why it must look absolutely identical to every visitor, turn it into a .pdf; it simply doesn't work on a page for the www. Once people learn to let go of old static concepts about layout/presentation, they begin to realise the quite astonishing power and flexibility of CSS. Persevere. It's worth it, and the satisfaction you'll gain once it all finally starts falling into place is immense. SignatureDG -- DG mail to usenet@gaelweb.co.uk goes to a black hole news@ is valid for the time being but may not remain so > If I am not to use pictures for the boxes' background, how am i > supposed to overlay the text onto <im> elements? Excuse my foul mood. I wrote you a beatifully detailed reply, then Google ate it. You don't do this. If you want to caption a picture then you have an <img>, then you stick text over it in a <p> or <div> and use CSS to control the z- index to place it over the image. position:relative; is likely to be useful too. If you want a box background, then you might use the CSS background- image property. This is just for "eye candy" images and they usually won't get printed. If you're trying to achieve borders, then don't use a single image overlay. That's equivalent to setting the box size in pixels, with all the limitations we've already discussed. If you must, I think Eric Meyer's website has the best example code to look at (using border images sliced into strips and corners). If you're trying to do the "rounded corners" effect, then re-design things. It doesn't look _that_ good, it looks very dated in web design terms, and it's famously a right pain in the arse to code. CSS 3 (manyana) will do it easily, but anything in the present day is a painful hack and just not worth the trouble. |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.