0

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

7
Contributors
8
Replies
9
Views
7 Years
Discussion Span
Last Post by drjohn
0

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

0

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

0

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

0

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

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;}
0

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!

1

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.

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.