hi!
i m using css and html for designing of my website and if i execute my website on mozilla firefox all alignments are correct, but if i use internet explorer all mess up.. please help
Thanks
nikita.chandra 0 Junior Poster in Training
ko ko 97 Practically a Master Poster
You can post some of your codes here. So everyone can see your codes and can find your problem.
mankis 0 Newbie Poster
I know that feeling :ooh:
There is some difference how IE handles margines and padding. So you should allways look there first.
teedoff 3 Posting Pro
If you dont provide a link to your site, or post your html and css code, we cant help.
AtomicPages 0 Newbie Poster
Yes, give us some sample code. A big issue with IE is its box model and how weird it is. Sometimes there are issues with IE that cannot be fixed normally so you have to use a conditional comment for IE.
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]--> nikita.chandra 0 Junior Poster in Training
yes, i have the problem of margins and padding.
Here i m posting my jsp page and css of project.
in IE alignment of table is changed and padding is also increased automatically.
My jsp page.
<%--
Document : test
Created on : 2 Sep, 2010, 12:22:06 PM
Author : sai13
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*,java.util.*,java.util.Date,java.text.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="dhtmlgoodies_calendar.css?random=20051112" media="screen"/>
<script type="text/javascript" src="dhtmlgoodies_calendar.js?random=20060118"></script>
<script type="text/javascript" src="index.js"> </script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home Page</title>
<script type="text/javascript">
//window.onload="hideReturn()"
function hideReturn()
{
document.getElementById("noPaengersRe").style.display="none"
document.getElementById("listNumOfPersonRe").style.display="none"
}
</script>
</head>
<body onload="hideReturn()">
<form name="frmIndex" action="SendBusInfo" method="post">
<%!
Connection con = null;//SendBusInfo
Statement stmtSelectSource;
ResultSet rsSelectSource;
String sqlSelectSource="select distinct(Source) from BusMaster order by Source asc ";
Statement stmtSelectDestination;
ResultSet rsSelectDestination;
String sqlSelectDestination="select distinct(Destination) from BusMaster order by Destination asc ";
%>
<%
con = (Connection) com.etravel.ConnectionClass.connection();
%>
<jsp:include page="header.jsp" />
<div id="round_top" ></div>
<div id="content" class="fixed">
<div id="maincontent" class="fixed">
<img src="images/travel.jpg" alt=".." width="200" height="200" class="img-left" />
<table width="300">
<tr>
<th colspan="100%" align="center">Book your ticket now!!!</th>
</tr>
<tr>
<td colspan=3 align="center"> <input type="radio" name="radioTrip" value="oneway" checked="checked" onclick="ch()" />One-way
<input type="radio" name="radioTrip" value="round" onclick="ch()" />Round-Trip</td>
</tr>
<tr>
<td>From</td>
<%
stmtSelectSource=con.createStatement();
rsSelectSource = stmtSelectSource.executeQuery(sqlSelectSource);%>
<td><select name="listFrom" id="listFrom">
<option>----Select City----</option>
<%while (rsSelectSource.next())
{%>
<option><%=rsSelectSource.getString(1)%></option>
<%}%>
</select>
</td>
</tr>
<tr>
<td>To</td>
<%
stmtSelectDestination=con.createStatement();
rsSelectDestination = stmtSelectDestination.executeQuery(sqlSelectDestination);%>
<td><select name="listTo" id="listTo">
<option>----Select City----</option>
<%while (rsSelectDestination.next())
{%>
<option><%=rsSelectDestination.getString(1)%></option>
<%}%>
</select></td>
</tr>
<%
DateFormat df = new SimpleDateFormat("yyyy/MM/dd");
String currentDate = df.format(new Date());
%>
<tr>
<td>Date of Journey :</td>
<td><input type="text" value=<%=currentDate%> name="from" id="fromDate"/><input type="button" name="btnFrom" value="cal" onclick="displayCalendar(document.frmIndex.from,'yyyy/mm/dd',this)"/></td>
<%--<td><input type="text" name="txtDoj" /><%--<img src="images/calendar.jpg" alt="Starflower"/></td>--%>
</tr>
<tr>
<td>Date of Return :</td>
<td align="bottom"><input type="text" value=<%=currentDate%> name="to" id="toDate" disabled/><input type="button" name="btnTo" value="cal" disabled onclick="displayCalendar(document.frmIndex.to,'yyyy/mm/dd',this)"/></td>
<%--<td align="bottom"><input type="text" name="txtDor" /><input type="image" name="cal" src="images/calendar.jpg" alt="" width="20" height="20"/></td>--%>
</tr>
<tr></tr><tr></tr>
<tr><td align="center" colspan="100">No. of Pasenger</td></tr>
<tr></tr><tr></tr>
<tr>
<td colspan=3 align="center">Onward :
<select name="listNumOFPerson" id="listNumOfPerson">
<%-- <option>----Select----</option>--%>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
Return :
<select name="listNumOFPersonRe" id="listNumOfPersonRe" disabled>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select></td>
</tr>
<tr>
<td colspan=3 align="center"><img src="images/searchbuses.gif" height="20" width="100" alt="Continue" border="1" name="checkAvl" onclick="checkSelect()"/></td>
</tr>
</table>
<input type="hidden" name="hdnIndex" value="index.jsp" />
<a href="http://www.twitter.com/"><img src="images/twitter.jpeg" alt=".." width="100" height="50" /></a>
<a href="http://www.google.com/"><img src="images/google.jpeg" alt=".." width="100" height="50"/></a>
<a href="http://www.irctc.com/"><img src="images/irctc.jpeg" alt=".." width="50" height="50"/></a>
<h3><blink>New Roots </blink></h3>
<ol>
<li> * Pune to Goa</li>
<li> * Pune to Ahemdabad</li>
<li> * Mumbai to Hyderabad</li>
</ol>
<h3><blink>Sailent Features </blink></h3>
<ol>
<li> * Home delivery service of bus tickets in major cities</li>
<li> * Return bus tickets reservation </li>
<li> * Read bus reviews submitted by passengers</li>
<li> * Fixed Schedule depatures</li>
</ol>
<a href="http://www.yatra.com/"><img src="images/link.gif" alt=".." width="500" height="80" class="img-right" /></a>
</div>
<jsp:include page="sideBar.jsp" />
</div>
<div id="round_bottom" ></div>
<jsp:include page="footer.jsp" />
</form>
</body>
</html>CSS
/*
Table Of Contents
1. =GENERAL
2. =HEADER
2.1 =LOGO
2.2 =NAVIGATION
3. =CONTENT
3.1 =MAIN CONTENT
3.2 =SIDEBAR
3.2.1 =SIDEBAR NAVIGATION
3.2.2 =CONTACT INFO
4. =FOOTER
5. =MISC
5.1 =ROUNDED CORNERS
5.2 =CONTACT FORM
-----------------------------------------------------------------------------------*/
/* =GENERAL
------------------ */
body {
background:#114E7B url(images/bgBlue.jpg) no-repeat top center;
color:#666666;
font:normal 14px Arial, Helvetica, sans-serif; position:relative;
}
a { color:#0000FF; }
a:hover { }
img{ border:none; }
code{ display:block; margin-bottom:15px; padding:10px; border-left:5px solid #ddd; }
blockquote{ display:block; margin:15px; padding-left:50px; background:#fff url(images/blockquote-quotemark.gif) no-repeat top left; }
blockquote p{ font-style:italic; font-family:Georgia,"Times New Roman",Times,serif; margin:0; height:1%; }
/* align images + text */
.img-left{ float:left; margin:15px 15px 95px 15px; } /* Add this to any image you want to left align */
.img-right{ float:right; margin:10px 5px 15px 15px; } /* Add this to any image you want to right align */
.text-right{ text-align:right; }
.text-center{ text-align:center;}
/* Clear Fix Hack - add class="fixed" to div's that have floated elements in them */
.fixed:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
.fixed{display:block;}
/* \*/
.fixed{min-height:1%;}
* html .fixed{height:1%;}
/* =HEADER
------------------ */
#login{
width: 400px;
height: 250px;
margin-left: 400px;
background-color: white;
}
#header {
margin:5px auto 30px auto;
width:840px;
height: 200px;
background: url(images/bus2.JPG) no-repeat top center;
}
/* =LOGO
------------------*/
.logo { padding:31px 10px 0px 10px; margin:0; float:left; color:#FFFFFF; }
.logo a{}
/* =NAVIGATION
------------------*/
.nav { padding:7px 0 0 0; margin:140px 20px 0 0; float:right;}
.nav ul { padding:0; margin:0; list-style:none; border:0;}
.nav ul li { float:left; margin:0; padding:0 2px 0 0; border:0;}
.nav ul li a { float:left; margin:0; padding:11px; color:#fff; font-size: 15px; text-decoration:none; outline:none; }
.nav ul li a:hover{ text-decoration:underline; }
.nav ul li a.active { text-decoration:underline; }
/* =CONTENT
-------------------*/
#contentTop{
width: 840px;
margin:0 auto;
background-color: white;
padding: 0 30px;
height:100px;
}
#contentTop table{
margin-left: 10px;
margin-bottom: 10px;
}
#contentTop td{
width: 200px;
color: red;
font-weight: bold;
font-size: 10px;
}
#contentBottom{
width: 840px;
margin:0 auto;
background-color: white;
padding: 0 30px;
}
#contentBottom Table{
background-color:white;
margin-bottom: 10px;
}
#contentBottom th{
background-color:#CA0308;
border-top:3px solid #970205;
border-bottom:3px solid #970205;
color:#ffe401;
}
#contentBusStructure{
width: 840px;
margin-left: 164px;
}
#content { width:840px;
margin:0 auto;
background-color:#FFF;
padding:0 30px;
}
#content table{
background-color:#FBEFF5;
margin:0 auto;
}
#content th{
background-color:#CA0308;
border-top:3px solid #970205;
border-bottom:3px solid #970205;
color:#ffe401;
}
#content td{
font-size: 12px;
}
#content h2 { margin:0; padding:10px 5px; font-size: 30px; color:#424a55; }
#content h3 { margin:0; padding:15px 5px; font-size:18px; }
#content h4 { margin:0; padding:15px 5px; font-size:16px; font-weight:bold; color: yellow; }
#content h4 { margin:0; padding:15px 5px; font-size:16px; font-weight:bold; color: maroon; }
#content ul { margin:0 40px 0 0; padding:0 10px 15px 20px; list-style:inside; }
#content li { margin:0; padding:0;}
#content ul li ul{ padding-bottom: 0px; }
#content p, #content li { line-height:24px; }
#content p { padding:5px; margin:0;}
/* =MAIN CONTENT
------------------*/
#maincontent { float:left;
width:600px;
padding:0 0 30px 0;
margin-top:50px;
margin-left:0px;
margin-right: 5px;
}
#maincontent h2 { border-bottom:3px solid #e3e3e3;
margin-bottom:25px;
margin-right: 5px;
}
#maincontent table{
line-height:1px;
margin-bottom: 10px;
background-color:#FBEFF5;
padding: 2px;
}
#maincontent th{
border-top:3px solid #970205;
border-bottom:3px solid #970205;
padding:5px;
color:#ffe401;
background-color:#CA0308;
text-align:center;
}
#maincontent td{
padding:2px;
font-size: 12px;
}
/* =SIDEBAR
------------------*/
#sidebar { float:right;
width:180px;
padding:12px 0 0 30px;
margin-left: 0px;
margin-top: 10px;
}
#sidebar table{
padding: 10px;
}
#sidebar td{
font-size: 10px;
}
#sidebar h3{ padding:10px 0; margin-bottom:10px; font-size:20px; border-bottom:3px solid #e3e3e3; }
#sidebar .title { background:url(images/news_title.gif) no-repeat left center; padding:5px 0 5px 20px; font-weight:bold;}
/* =SIDEBAR NAVIGATION
---------------------*/
#sidebar ul.sidebar_nav { padding:0; margin:0; list-style:none;}
#sidebar ul.sidebar_nav li { padding:5px 10px; border-bottom:1px solid #e5e5e5;}
#sidebar ul.sidebar_nav li a { background:none; color:#6e6e6e; font-weight:normal; padding:0 0 0 15px; text-decoration:none; }
#sidebar ul.sidebar_nav li a.active { color:#0000FF;}
#sidebar ul.sidebar_nav li a:hover { text-decoration:underline; color: maroon;}
/* =CONTACT INFO
-------------------*/
#sidebar ul.contact_info { padding:0; margin:0; list-style:none;}
#sidebar ul.contact_info li { width:210px; float:left; background:url(images/cont_bg.gif) no-repeat left center; padding:0 0 0 15px; margin:0 0 0 5px;}
#sidebar ul.contact_info li a { padding:0; margin:0; background:none;}
/* =FOOTER
-------------------*/
#footer { background: url(images/bg_footer.gif);
padding:0; height:58px;
margin:0 auto;
margin-top: 15px;
margin-right: 170px;
padding:10px 40px;
width:830px;
border-top:2px solid #c5fc08;}
#footer p { font-size: 12px;; color:#fff;}
#footer a { color:#fff; text-decoration:underline;}
.copyright{ float:left;}
.credits{ float:right;}
/* =MISC
-------------------*/
/* =ROUNDED CORNERS
-------------------*/
#round_top{ width:900px; height:20px; background:url(images/round-top.png) no-repeat top center; margin:0 auto; }
#round_bottom{ width:900px; height:20px; background:url(images/round-bottom.png) no-repeat top center; margin:0 auto; }
/* =CONTACT FORM
-------------------*/
form { margin:0; padding:5px 10px;}
form ol { margin:0; padding:0; list-style:none;}
form li { margin:0; padding:0; background:none; border:none; display:block;}
form li.buttons { margin:5px 0 5px 110px;}
form label { margin:2px 10px 2px 0; width:170px; display:block; padding:3px 0;
text-transform:capitalize; float:left; text-align:right;}
form label span { color:#2c2c2c;}
form input.text { width:320px; border:1px solid #dcdcdc; margin:5px 0; padding:5px; height:16px; background:#FFF; float:left;}
form textarea { width:320px; border:1px solid #dcdcdc; margin:5px 0; padding:5px; background:#FFF; float:left;}
#menu
{ height:45px; opacity:.80;filter: alpha(opacity:80); -moz-opacity: 0.8; margin-top: 80px; margin-right:0px }
.toplinks
{
width:100px;
text-align:center;
float:right;
height:30px;
line-height:35px;
font-family:tahoma;
font-size:10px;
font-weight:bold;
background-color:maroon;
display:block;
margin:18px 0 0 1px;
border:1px solid #993300;
color:white;
text-decoration:none;
}
.toplinks:hover
{ color:maroon; background-color:white;
}
h1{
color: white;
}
h2{
color: white;
}
h3{
color: red;
}
.table-center{margin-left: 450px;
margin-right: 100px ;
margin-bottom: 20px;
margin-top: 20px;
}
.border{
border: 1px solid #cccccc;
color: #000000;
font-family: Arial,Helvitica,sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
}
.borderHidden{
border: none;
color: #000000;
font-family: Arial,Helvitica,sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
}
.redbold{
color: #CA0000;
font-family: Arial,Helvitica,sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.cellcolor
{
background-color: #84C1DF;
}
.seats-table{
line-height:1px;
margin-bottom: 20px;
margin-left: 100px;
margin-right: 0px;
background-color: silver;
}
.table-left{float:left; margin:10px 15px 15px 5px;} kidwon 0 Light Poster
Don't you have some test web server to provide us with a link?
When finding problem in such a big piece of code seeing things is quite necessary!
teedoff 3 Posting Pro
Ok first things first. You have a ton of errors in your code. Never used java server pages, but many of the errors are from your commenting. I know <%-- --%> is a commenting technique in jsp.
Regardless of that, you should try to fix these errors as a first step to debugging any rendering issues you have. Good semantic code is just good practice.
drjohn 56 Posting Pro in Training
start with a browser reset. some people recommend huge resets, but I settle for the simplest one that works.
body {
margin:0;
padding:0
}Next don't bother adding padding to any div itself, add it to the bits you add inside the div. That usually gets round lots of little problems.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.