|
HTML - Box Model Incompatibilities - The Truth?
Hi All,
Being a frustrated businesswoman today, I may come across as a little frazzled, and I could spend the next half an hour complaining about certain company's not adhering to standards, but I won't. The problem is this: I have a website which displays correctly in Firefox 3.6.3 but just won't display correctly in IE 7 (and I haven't even tried other flavours of IE). From searching, I understand that it is to do with the box model problem i.e., different ways of calculating box sizes depending on browsers. I have tried a variety of solutions found online but nothing seems to work. The suggestion seems to be that specifying a doctype will resolve any incompatibilities but that doesn't seem to work either. I have created a special page which I am free to 'play' around with, in an attempt to solve this but all of my attempts so far have failed. The page is at www.ashleyschoolofmotoring.co.uk/index2.html - in Firefox, this displays correctly but in IE the left index is out of position along with some other problems. I have simply tried to resolve the issue with the left index up to now. I haven't posted the code for index2 here as it can be accessed via the page itself. However, I have posted the relevant part of the css file that I am using below. If anyone can throw any light on what I need to do to get the pages to look the same, I will be forever in your debt... Thanks Em Code: .main {float: left; width: 930px; height:470px; text-align:justify; font-size:12pt; font-family:"Arial";}
.main-index {float: left; width: 100px; color:#7153a0; }
.main-index ul {padding-left:10px; list-style-type:none; }
.main-index li {padding-right:0px; padding-bottom:10px; text-align:center; }
.main-centre {width: 700px ; height:450px; position: absolute; top:110px; left: 120px; padding-top:10px; padding-right:10px; overflow:auto; }
.main-right {float: right; width: 80px; padding-top:0px; }
.main-right ul {padding-left:0px; list-style-type:none; }
.main-right li {padding-right:0px; padding-bottom:30px; text-align:center; }
Similar TutorialsIn one of my web site , I am using <p> tag inside <span> tag. It works fine on IE, Opera, FireFox & Google chrome. On other browsers like netscape, seamonkey and safari paragraph shows in just single line ignoring the values specified in <span>. I have initially wrote this with <div> tag , but it is still not working. Troubling Code which is in php file : echo '<div style="position:absolute;z-index:2;left:50px;top:425;width:350;height:50">'; echo '<fieldset>'; echo '<Legend id="entry"><b>About CA Shiksha</b></Legend>'; echo '<p>CA Shiksha is an initiative to transform the learning. We are taking you from e-learning to i-learning (interactive learning), providing you comprehensive package of e-learning + video lectures + mock tests + assessment report + quick revision notes making it lot easier for you to grasp, understand and deliver. Now you can learn at your leisure anytime</p>'; echo '</fieldset>'; echo '</div>'; In one of my web site , I am using <p> tag inside <span> tag. It works fine on IE, Opera, FireFox & Google chrome. On other browsers like netscape, seamonkey and safari paragraph shows in just single line ignoring the values specified in <span>. I have initially wrote this with <div> tag , but it is still not working. Troubling Code which is in php file : echo '<div style="position:absolute;z-index:2;left:50px;top:425;width:350;height:50">'; echo '<fieldset>'; echo '<Legend id="entry"><b>About CA Shiksha</b></Legend>'; echo '<p>CA Shiksha is an initiative to transform the learning. We are taking you from e-learning to i-learning (interactive learning), providing you comprehensive package of e-learning + video lectures + mock tests + assessment report + quick revision notes making it lot easier for you to grasp, understand and deliver. Now you can learn at your leisure anytime</p>'; echo '</fieldset>'; echo '</div>'; Can any one give me the HTML code for model window? Hi Experts, I have a page which has a small toolbar and an Iframe. Somehow I am getting a weird white space between the header and the rendered Iframe (Chart in the snap shot). An expert here on EE told me about box model bug and that it can be be fixed by DOCTYPE declaration. Luckily It got fixed but only on IE7, I want it to work on IE6. Can you please suggest me a way to get rid of this white space? I have attached my code, snapshot and stylesheets used in this page Code:
<%@page language="java" import="java.sql.*" errorPage=""%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>View Detail</title>
<script type="text/javascript" src="/analytics/static/zoom/jquery.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/thickbox.js"></script>
<link rel="stylesheet" href="/analytics/static/zoom/thickbox.css" type="text/css" media="screen" />
<style type="text/css">
@import url("/analytics/static/styles/intranet.css"); /* main stylesheet */
@import url("/analytics/static/styles/intranet-2col.css"); /* column stylesheet */
@import url("/analytics/static/styles/intranet-2col-1024.css"); /* 1024px stylesheet */
</style>
<link rel="shortcut icon" href="../jsp/favicon.icon" />
</head>
<body>
<div id="page-wrapper"><%@include file="Header.jsp"%>
<div id="column-wrapper"><!-- begin columns -->
<%@include file="NEW_TOOLBAR.jsp"%>
<div id="content"><!-- begin content column -->
<div class="inner">
<iframe src="chart.html?chartType=${detailForm.chartType}&chartGroup=${detailForm.chartGroup}&chartSubgroup=${detailForm.chartSubgroup}&liabilityCode=IRU&timeline=${detailForm.timeline}&width=600&height=400" frameborder="0" scrolling="no" width="700" height="430" align="top"></iframe>
<!-- end content column, then column wrapper --></div>
</div>
<%@include file="Footer.jsp"%></div>
</body>
</html>
Hey there, We have a webpage up for car parts that we offer. Our hosting services allows us just to login under there control panel and type up hte informaiton we want, such as Price, Item Description and so on. What we are looking for is a way to allow our customers to search parts by there Make, Model and Year. Is there a way to do this? If there is, is there some tutorials out there on how to instruct a novice user on how to do this? Here is an example: http://ultrarev.com/home.php?cat=0, it is the top bar on the right. Users can input there Make, Model and year and search for parts for the vehicle. Thanks My web page is suffering from the Box model bug described he http://en.wikipedia.org/wiki/Interne..._box_model_bug I cannot seem to rectify the problem. My site is he http://spyware-free.us Yes, I know the xhtml is not valid, but that's blogger's fault. If you want to see the error on a completely valid page, try this: http://spyware-free.us/intro xhtml: http://validator.w3.org/check?uri=ht...doctype=Inline css: http://jigsaw.w3.org/css-validator/v...usermedium=all A picture of my problem is he http://spyware-free.us/2007/05/template-updated.html As the article states, it works fine for IE7 and FF, but not IE6. Any tips would be greatly appreciated. wng |
|||||||