| | |
Different Text Display in Different Browser ???
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
Why is it that text within certain elements are displayed BIGGER in Microsoft Explorer & perfectly well in Firefox on my website ??? See the "Template" text, for example. Is this normal due to browser's incompatibility, since I never had such problem before ???
darsh25.silverserve.co.uk/AllInclusiveWebDesign/
CSS is:
darsh25.silverserve.co.uk/AllInclusiveWebDesign/
CSS is:
HTML and CSS Syntax (Toggle Plain Text)
/* CSS Document */ body { background-color:white; } /* .................................... HEADER & FOOTER ................................... */ #header { background-image:url(headerbackground.jpg); height:5%; font-family:Georgia, "Times New Roman", Times, serif; color:white; text-align:center; width:100%; } #header a { color:yellow; text-decoration:none; } #header a:hover { text-decoration:underline; } #footer { background-image:url(headerbackground.jpg); font-family:Georgia, "Times New Roman", Times, serif; color:white; text-align:center; border-top:2px solid white; float:left; height:5%; width:100%; } #footer a { color:yellow; text-decoration:none; } #footer a:hover { text-decoration:underline; } /************************************ BANNER ************************************/ #banner { background-image:url(bannerbackground.jpg); text-align:center; height:150px; } /************************************ TEMPLATE MENU ************************************/ #templateMenu { float:left; width:11%; border:1px solid red; background-color:green; } #templateMenu ul { list-style:none; margin:0px; position:relative; padding:0px; width:100%; border:thin solid red; border-bottom:0px; } #templateMenu ul a { display: block; text-align:center; background-color:yellow; text-decoration:none; width:100%; border-bottom:thin solid red; color:blue; position: relative; font-size:large; line-height:30px; } #templateMenu ul a:hover { color:black; background-color:yellow; text-transform:uppercase; } /************************************ CENTER CONTENT ************************************/ #centerContent { background-image:url(contentbackground.jpg); width:700px; margin-left:35px; float:left; border-left:1px solid #999999; border-right:1px solid #999999; } #centerContent ul { font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; list-style-type:decimal; color:black; } #centerContent li { margin:3% 3%; line-height:1.5em; } /************************************ LEFT CONTENT ************************************/ #leftContent { margin-top:30px; float:left; } /************************************ RIGHT CONTENT ************************************/ #rightContent { float:right; } /*********************************** Pre-Defined Elements ************************************/ p.first-letter:first-letter { font-family:Georgia, "Times New Roman", Times, serif; color:red; margin-left:5%; font-size:xx-large; } p { font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; font-size:medium; line-height:1.5em; margin:2% 3%; color:black; } h3 { font-family:Georgia, "Times New Roman", Times, serif; text-align:left; font-size:x-large; margin:2% 3%; color:purple; letter-spacing:5px; border-bottom:thin solid #990000; } h4 { font-family:Georgia, "Times New Roman", Times, serif; text-align:center; font-size:x-large; color:green; } h5 { font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; font-size:medium; margin:2% 3%; color:blue; } h6 { font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; margin:0; font-size:medium; font-weight:normal; color:red; } .italic { font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; color:black; font-style:italic; } .bold { font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; color:black; font-weight:bold; } .colorTextRed { font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; color:red; } .colorTextBlue { font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; color:blue; } .colorTextGreen { font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; color:green; } .colorTextLime { font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; color:#00FF00; } .background { background-image:url(background.jpg); } /*********************************** TABLE ***********************************/ #contactTable { border-spacing:2%; margin:3% 3%; font-family:Georgia, "Times New Roman", Times, serif; text-align:left; } #contactTable tr { border:none; } #contactTable td { font-size:medium; color:black; } .contactForm { background-color:#99FF99; border:1px solid red; } /*********************************** TABLE CLASSES ***********************************/ .table { background-color:white; border-spacing:2%; margin:3% 3%; font-family:Georgia, "Times New Roman", Times, serif; border-collapse:collapse; text-align:left; } .tr { border:none; } .td { border:thin solid red; font-size:medium; padding:2px; text-align:center; color:black; }
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
That's right to be little clearer in case you're not aware, if you're not specific about point size in your HTML/CSS the browser defaults to:
IE view menu->text size (set to medium by default perhaps this has got changed by accident in your IE browser to larger or something)
Firefox view menu->text size this just goes + or _ (use ctrl+ or ctrl- with keyboard much easier)
In my experience Firefox tends to display text at a smaller default size to IE.
IE view menu->text size (set to medium by default perhaps this has got changed by accident in your IE browser to larger or something)
Firefox view menu->text size this just goes + or _ (use ctrl+ or ctrl- with keyboard much easier)
In my experience Firefox tends to display text at a smaller default size to IE.
•
•
•
•
Originally Posted by tgreer
A quick perusal through your CSS didn't show that you were defining any absolute point sizes. Relative terms like "medium" will be displayed... in relative terms.
In the future, could you please just post scaled down versions, only those portions directly related to your question? Thanks.
Yep, that makes sense
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
![]() |
Similar Threads
- how can i display the ms word document in asp page? (ASP)
- display problem with diffrent browser. (HTML and CSS)
- JApplet display problem (Java)
- Random text display with image, link (PHP)
- This ought to be simple - extra spaces (PHP)
Other Threads in the HTML and CSS Forum
- Previous Thread: CSS z-index for image shadow ???
- Next Thread: HTML CSS bullet style
| Thread Tools | Search this Thread |
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7







