 |
 | 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 / September 2007Div border that looks the same in IE and Firefox?
All i want to do is draw a simple rectangle. The rectangle has to be the same size in IE and Firefox. This is how I tried: <div style="position: absolute; z-index: 1; width: 438; height: 318; top: 77; left: 200; padding: 0; border: red 1px solid;"></div> Firefox will draw a 438x318 area with a red box around it. IE will draw a 436x316 area with a red box around it, making the overall rectangle 438x318. How can I get it to look the same in both of these browsers?? > All i want to do is draw a simple rectangle. The rectangle has to be > the same size in IE and Firefox. URL? What's your doctype? I could make a difference... > This is how I tried: > <div style="position: absolute; z-index: 1; width: 438; height: ^^^ > 318; top: 77; left: 200; padding: 0; border: red 1px solid;"></div> ^^^ ^^ ^^^ Well your try was not good enough. 438 what? Pixels, feet, parsecs (real bigums)? With CSS lengths!=0 require* units specified. (*just a couple of exceptions)  SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com Thanks for replying, Jonathan. I dont have any doctype specified, and there is no url yet, because I've just started working on this particular page and it is stored locally on my hard drive. Also, without specifying pixels, i've always found that pixels are implied (i'm not certain about that though). Even with this problem, both IE and Firefox are using pixels. THIS IS THE PROBLEM: When Firefox is told to create a div with a border around it, it does just that. It adds the border around the OUTSIDE of the div. IE on the other hand, will create a div with the border on the INSIDE of the div. The net result will always be that the box will be different sizes in those 2 browsers. I am using the latest version of both browsers. There must be a solution (hopefully a simple one). On Sep 24, 10:32 pm, "Jonathan N. Little" <lws4...@centralva.net> wrote: > OBAFGKM_...@yahoo.com wrote: > > All i want to do is draw a simple rectangle. The rectangle has to be [quoted text clipped - 21 lines] > ------------------- > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com > I dont have any doctype specified, > THIS IS THE PROBLEM: Add <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> and watch your problem disappear. (or at least as close as my eyes can tell how many pixels high the box is...) IE is wrong, by the way. But why is this a problem? No visitor is going to see your site in more than one browser. Only us developers do that. Who cares if it is two pixels different? Signature-bts -Motorcycles defy gravity; cars just suck Thanks Beauregard. You said: " Add <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> and watch your problem disappear. " I had tried that already and it didn't change anything. You said: " But why is this a problem? No visitor is going to see your site in more than one browser. " I was hoping for a simple solution that would look correct in either browser. You said: " Who cares if it is two pixels different? " For my needs, the rectangle has to be exact. Anybody have any ideas how to make IE put the border on the outside of the div? ---------------------------------------- On Sep 24, 11:54 pm, "Beauregard T. Shagnasty" <a.nony.m...@example.invalid> wrote: > OBAFGKM_...@yahoo.com wrote: > > I dont have any doctype specified, [quoted text clipped - 16 lines] > -bts > -Motorcycles defy gravity; cars just suck I found a solution that seems to work here: http://forums.digitalpoint.com/showthread.php?t=53522 Following the advice of someone named "Draculus", I created 2 nested divs. The inner div has only the width and height specified. The outer div has the rest of the info. This creates an identical sized box in either browser. --------------------------- On Sep 25, 12:32 am, OBAFGKM_...@yahoo.com wrote: > Thanks Beauregard. > [quoted text clipped - 41 lines] > > -bts > > -Motorcycles defy gravity; cars just suck > Thanks Beauregard. > [quoted text clipped - 4 lines] > For my needs, the rectangle has to be exact. Anybody have any ideas > how to make IE put the border on the outside of the div? Use a valid doctype, as above, and make sure it is the very first thing in the file. Without a valid doctype (and even *with* some otherwise valid ones) IE runs in quirks mode where the border is *included* in the box. This is for "backwards compatibility" with the many bugs in IE5.x. In standards mode the border is *around* the box. Here is your box with a valid doctype (border exagerated): http://cueword/barefile/t1.html Looks the same with IE and FF. Here is your box without a doctype. http://cueword/barefile/t2.html Admire the difference. SignatureRichard. > Thanks Beauregard. > [quoted text clipped - 7 lines] > your site > in more than one browser. " Most likely because: a) your markup has errors that still throws MSIE in quirks mode making it "do the wrong thing" (Sorry Spike) b) Of course is we could actually *see* your markup rather than imagine it we could be more specific. c) fine to develop on your hard drive, but note that a page may 'behave' very differently when served via a server AND your *can* upload a copy on a public server when you wish the NG to assist you. d) as I stated originally your are *misinformed*. HTML attribute lengths are in pixels and do not have units specified: <table width="300"> but CSS lengths greater than 0 *do* require units: table { width: 300px; } table { width: 30em; } line-height is an exception where it can be expressed as a ratio... line-height: 1.5 > I was hoping for a simple solution that would look correct in either > browser. [quoted text clipped - 3 lines] > For my needs, the rectangle has to be exact. Anybody have any ideas > how to make IE put the border on the outside of the div? Maybe it doesn't need to be exact but relative. Who knows, but to get any hope of IE to follow the rules predictably your markup and css need to be error free and conform to 4.01 strict doctype. Trigger quirks mode and all bets are off! ### Lastly, please to not top-post, confused then use the "Google" Luke... http://www.google.com/search?hl=en&q=usenet+top-posting&btnG=Google+Search usenet top-posting - Google Search SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com On Sep 25, 11:30 am, "Jonathan N. Little" <lws4...@centralva.net> wrote: > OBAFGKM_...@yahoo.com wrote: > > Thanks Beauregard. [quoted text clipped - 58 lines] > ------------------- > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com Sorry about the top posting. I never knew that people actually preferred scrolling thru old text to get to the new stuff. I thought i was making it easier to read. Anyway, all is working fine now. I also didnt realize before last night that adding the doctype to the head of the file actually prevents bugs in IE. This maybe could have saved me many hours of torture in the past. There are no errors in my markup. The problem is still, as i've stated a few times now, that IE by default, draws a div border INSIDE the div. Firefox draws it around the outside. As far as not specifying pixels. Anytime that i've created a div, and not specified units, 100% of the time it created it using pixels. If i create a div like this: <div style="with: 200; height: 300;...>, every time a div 200px x 300px will be created. Maybe i've just been lucky. Thanks for the help. In article <1190761276.773972.209400@g4g2000hsf.googlegroups.com>, > Sorry about the top posting. I never knew that people actually > preferred scrolling thru old text to get to the new stuff. I thought i > was making it easier to read. If you had edited the text quoted, there would have only been the must read first text there and so the question of preference would be self evident. Signaturedorayme <snip> > Sorry about the top posting. I never knew that people actually > preferred scrolling thru old text to get to the new stuff. I thought i > was making it easier to read. We don't! <snip> out bits that your are not commenting on like this... > Anyway, all is working fine now. I also didnt realize before last > night that adding the doctype to the head of the file actually > prevents bugs in IE. This maybe could have saved me many hours of > torture in the past. (And interject comments as I am doing here rather than all at the bottom) It *can* prevent trigging quirks mode but does not guarantee it. > There are no errors in my markup. The problem is still, as i've stated > a few times now, that IE by default, draws a div border INSIDE the > div. Firefox draws it around the outside. IE does not draw it inside if it's not in quirks mode. My guess is your still have errors. URL??? How you know there are no errors? Did you validate it? > As far as not specifying pixels. Anytime that i've created a div, and > not specified units, 100% of the time it created it using pixels. If i > create a div like this: <div style="with: 200; height: 300;...>, every > time a div 200px x 300px will be created. Maybe i've just been lucky. Are you sure? With which browser*s* not just MSIE. SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com |
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.