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

Recommended Answers

All 8 Replies

You can post some of your codes here. So everyone can see your codes and can find your problem.

I know that feeling :ooh:
There is some difference how IE handles margines and padding. So you should allways look there first.

If you dont provide a link to your site, or post your html and css code, we cant help.

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]-->

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
                                &nbsp;&nbsp;<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;}

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!

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.

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.