Login.css
body {
font-family: "Trebuchet MS", Tahoma, Arial, Geneva, sans-serif, Helvetica, sans-serif;
font-size: 13px;
background: url(../images/bg.png) 0 64px repeat-x;
margin: 0;
}
.wrapper {
xmargin: 0 auto;
}
#border-top.h_green {
background: url(../images/j_header_middle.png) repeat-x;
height: 84px;
xmargin: 0 auto;
}
#contentbox {
width: 755px;
margin: 0 auto;
xbackground: #efefef;
padding: 0px;
position: relative;
}
#header-top {
width: 960px;
margin: 0 auto;
xbackground: #efefef;
padding: 0px;
position: relative;
}
#menuheader {
position: relative;
}
#contentbox p {
padding: 0 0 10px 0;
}
#menubox {
background: #fff;
padding: 3px 10px;
border-left: 1px solid #cccecc;
border-right: 1px solid #cccecc;
height: 15px;
}
#user_name {
position: absolute;
right: 0px;
top: 0px;
xbackground: url(../../../images/icons/user.png) no-repeat scroll 0 2px
transparent;
padding-left: 20px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666;
}
.loginwrapper {
width: 755px;
margin: 0 auto;
}
.btn{
background:url(../images/btn.jpg) repeat-x;
height:28px;
border:none;
color:#fff;
margin-top:20px;
}
.loginbox {
background: url(../images/login_shadow.png) no-repeat;
height: 310px;
padding: 40px;
}
.rightsection {
width: 85%;
float: right;
border-bottom: 1px solid #cccc;
}
.rightboxwrapper {
float: left;
width: 325px;
padding-right: 30px;
background: url(../images/loginleft.png) no-repeat center bottom;
height: 262px;
}
.rightboxwrapper .loginheader h2 {
color: #0588ab;
font-size: 16px;
font-family: trebuchet MS;
margin: 0;
text-align: left;
}
.loginform input {
width: 170px;
}
.loginform input#btnsubmit {
width: 80px !important;
border: none;
}
.loginform {
padding: 10px 0 0 45px;
line-height: 35px;
background: url(../images/lock.png) no-repeat right center;
width: 335px;
}
.loginform td {
color: #333333;
font-family: trebuchet MS;
font-size: 12px;
padding: 0;
margin: 0;
}
.copyright {
width: 100%;
text-align: right;
padding: 5px 0px;
font-size: 11px;;
color: #0588ab;
font-family: trebuchet MS;
}
.copyright p {
padding-right: 15px !important;
}
index.jsp
<%# page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.metadata.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#commentForm1").validate({meta: "validate"});
required: 'Enter this!'
});
</script>
<style type="text/css">
form { width: 500px; }
form label { width: 250px; }
form label.error,
form input.submit { color: red; font-size: 20px; }
</style>
</head>
<body>
<div class="wrapper">
<!--maindiv wrapper starts-->
<div id="border-top" class="h_green">
<!--header starts-->
<div id="header-top">
<div><img width="249" height="54" style="padding:15px 0 0 0px" src="images/companylogo.png"> </div>
</div>
</div>
<div id="contentbox">
<div style="background:none;border:none;" id="menubox">
<div id="menuheader">
<div id="message">
<p style="text-align:center; padding-top:10px;" class="message_text"> </p>
</div>
<div id="user_name">
</div>
</div>
</div>
<div class="loginbox">
<div style="width:100%!important;" class="rightsection">
<form name="loginform" action="loginServlet" method="post" id="commentForm1">
<div class="loginwrapper">
<div class="rightboxwrapper">
<table cellspacing="0" cellpadding="0" border="0" align="center" class="loginform">
<tbody><tr class="loginheader">
<th style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:35px;"> <h2>Login</h2></th>
</tr>
<tr>
<td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;">User ID </td></tr>
<tr>
<td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;"><input type="text" id="username" name="username" class="{validate:{required:true, messages:{required:'*'}}}"></td>
</tr>
<tr>
<td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;">Password</td></tr>
<tr>
<td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;"><input type="password" id="password" name="password" class="{validate:{required:true, messages:{required:'*'}}}"></td>
</tr>
<tr>
<td colspan="2">
<input value="Login" class="btn" style="width:60px;" type="submit"/>
<input value="Reset" class="btn" style="width:60px; margin-left:10px;" type="reset"/>
</td>
</tr>
</tbody></table>
</div>
<div class="imagewrapper">
<img width="323px" height="262px" src="images/loginimg.png">
</div>
</div> <div style="clear:both; color:fff"></div>
</form>
</div>
<div class="cleared"></div>
</div>
<div id="footerwrapper"><!--Div for the Footer -->
<div class="copyright">
<p>Copyright © 2012 BitsCrafters HRM All rights reserved.</p>
</div><!--ended Footer Div-->
</div>
</div>
</div>
</body>
</html>
What is wrong with this code? can anyone help me out of this? There is something wrong because when i run it through tomcat sometime its work but sometime it doesn't work some icon and image is not displayed. In browser i checked view source to check whether css path is correct or not it is correct.
Ran into the same, just correct the href path:
<link rel="stylesheet" type="text/css" href="./css/login.css"/>
The code and CSS look correct at first glance, so the error is elsewhere.
Use a tool like Firebug or "Inspect Element" to check what your browser gets. All these tools have a network tab where you can see what the browser requested and what it got. Look for:
Do you see all the URLs that you expect?
Could the server serve all these (HTTP status 200)
Check the content of the files. Do they contain what you expect?
Check the error console. Do you get any CSS / JavaScript errors?
Inspect the element in question. Does it have the correct CSS styles? In the CSS panel, do you see the correct styles?
Related
Basically, I have a navigation bar in my website. In the centre of the nav bar, I want my website's name centred. This was easy of course, but now I want my website's logo positioned to the left of it. Float: left does not work, as this simply puts the logo on the far left of the nav bar.
<!doctype html>
<html>
<head>
<style>
*
{
margin: 0em;
padding: 0em;
}
#container {
width:100%;
border:1px solid #999;
margin:0px auto 0;
overflow:hidden;
background: gray;
}
#name {
text-align: center;
position: relative;
}
#top-left {
position: relative;
float: left;
border: 1px solid black;
}
#top-right {
float:right;
margin-bottom:10px;
}
#bottom-right {
float:right;
clear:both;
}
</style>
</head>
<body>
<div id="container">
<img id="top-left" src="http://www.webmasterworld.com/gfx/logo.png" alt="">
<img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
<img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
<h1 id="name">champion</h1>
</div>
</body>
</html>
You can do this trick:
<table style="background-color:Gray; width:100%;" >
<tr>
<td style="text-align:right; width:45%">
<img id="top-left" src="http://www.webmasterworld.com/gfx/logo.png" alt="">
</td>
<td style="text-align:left; width:30%"">
<h1 id="name">champion</h1>
</td>
<td style="text-align:right; width:25%;">
<img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
</td>
</tr>
<tr style="text-align:right;">
<td colspan="3">
<img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
</td>
</tr>
</table>
I have it running here where the float: left appears to be working. I'm guessing there may be something I'm missing. Could you put a jsfiddle or show a live example by chance.
Here's what I see
You can do something like this. It uses :before to attach the logo to the heading text: http://codepen.io/pageaffairs/pen/bchLo
<!doctype html>
<html>
<head>
<style>
*
{
margin: 0em;
padding: 0em;
}
#container {
width:100%;
border:1px solid #999;
margin:0px auto 0;
overflow:hidden;
background: gray;
text-align: center;
}
#name {
line-height: 56px;
position: absolute;
width: 100%;
}
#top-right {
float:right;
margin-bottom:10px;
}
#bottom-right {
float:right;
clear:both;
}
h1 span {
position: relative;
display: inline-block;
padding: 0 20px;
}
h1 span:before {
content: "";
width: 109px;
height: 56px;
background: url(http://www.webmasterworld.com/gfx/logo.png);
position: absolute;
top: 0;
right: 100%;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
<img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
<h1 id="name"><span>champion</span></h1>
</div>
</body>
</html>
The html file is
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Patients Detailed Information Page</title>
<link href="test.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div id="detailed_fistpart">
<div id="detailed_div_image">
</div>
<div id="detailed_div_basicinfo">
<div class="detailed_div_inner">
<div class="detailed_div_captain"><strong>Basic Info</strong></div>
<div>
<table id="detailed_table_basicinfo">
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Name</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Gender</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td><font color="#9c9a9c">Birthday</font></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<div id="detailed_div_contactinfo">
<div class="detailed_div_inner">
<div class="detailed_div_captain"><strong>Contact Info</strong></div>
<div>
<table id="detailed_table_contactinfo">
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Phone</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Email</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td><font color="#9c9a9c">Address</font></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="detailed_div_reminding">
<textarea id="detailed_reminding"></textarea>
<input type="button" class="button" value="update"></input>
</div>
</div>
</body>
</html>
and this is my css file:
body{
margin:0;
padding:0;
}
#container{
width:900px;
margin:0 auto;
text-align:left;
position:relative;
filter:alpha(opacity=100);
opacity: 1.0;
}
#detailed_fistpart {
margin-top: 10px;
}
#detailed_image {
width: 200px;
height: 200px;
}
#detailed_div_basicinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}
.detailed_div_inner {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
.detailed_div_captain {
font-size: 20px;
height: 40px;
}
#detailed_table_basicinfo {
width: 193px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
.detailed_table_td {
border-bottom: 1px solid #efefef;
}
#detailed_div_contactinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}
#detailed_table_contactinfo {
width: 400px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
#detailed_div_reminding {
width: 900px;
}
#detailed_reminding {
width: 700px;
height: 70px;
}
.button {
background-color: #004584;
font-size:16px;
color: #FFF;
font-weight: bold;
}
And when I use firebug (the extension), I can see that it is the div with id=detailed_div_reminding includes the div with id=detailed_div_basicinfo and div with id=detailed_div_contactinfo rather than the div with id=detailed_fistpart.
One problem is that if you add magin-top: 20px to #detailed_div_reminding, it doesn't produces margin with #detailed_fistpart
Why?
hi there u need to add this line
<div style="clear:both"></div>
before this line of code <div id="detailed_div_reminding">
Did you mean that you are not getting the margin on top of your last section? It is because you have floats present and and you need to clear them for subsequent section.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Patients Detailed Information Page</title>
<link href="test.css" rel="stylesheet" />
<style>
body{
margin:0;
padding:0;
}
#container{
width:900px;
margin:0 auto;
text-align:left;
position:relative;
filter:alpha(opacity=100);
opacity: 1.0;
}
#detailed_fistpart {
margin-top: 10px;
}
#detailed_image {
width: 200px;
height: 200px;
}
#detailed_div_basicinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}
.detailed_div_inner {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
.detailed_div_captain {
font-size: 20px;
height: 40px;
}
#detailed_table_basicinfo {
width: 193px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
.detailed_table_td {
border-bottom: 1px solid #efefef;
}
#detailed_div_contactinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}
#detailed_table_contactinfo {
width: 400px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
#detailed_div_reminding {
width: 900px;
margin-top:20px;
}
#detailed_reminding {
width: 700px;
height: 70px;
}
.button {
background-color: #004584;
font-size:16px;
color: #FFF;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<div id="detailed_fistpart">
<div id="detailed_div_image">
</div>
<div id="detailed_div_basicinfo">
<div class="detailed_div_inner">
<div class="detailed_div_captain"><strong>Basic Info</strong></div>
<div>
<table id="detailed_table_basicinfo">
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Name</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Gender</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td><font color="#9c9a9c">Birthday</font></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<div id="detailed_div_contactinfo">
<div class="detailed_div_inner">
<div class="detailed_div_captain"><strong>Contact Info</strong></div>
<div>
<table id="detailed_table_contactinfo">
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Phone</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Email</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td><font color="#9c9a9c">Address</font></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div style="clear:both" ></div>
<div id="detailed_div_reminding">
<textarea id="detailed_reminding"></textarea>
<input type="button" class="button" value="update"></input>
</div>
</div>
</body>
</html>
If I large my browser then my div header width don’t show 100%. But I set my div header width 100%. Please can someone point out what I may be doing wrong here? Many thanks. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome Page</title>
<link rel="shortcut icon" href="image/icon.ico" >
<link rel="StyleSheet" href="style/login.css" type="text/css"/>
</head>
<body>
<div id="header">
<div id="header_contain">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" style="font-size: 18pt; font-weight: bold">Hello</td>
<td width="50%" align="right" style="font-size: 18pt; font-weight: bold">What's Up!</td>
</tr>
</table>
</div>
</div>
</body>
</html>
css code
body
{
margin: 0px;
padding: 0px;
font-family: arial, helvetica, sans-serif;
font-size:10pt;
}
#header
{
width: 100%;
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
width: 980px;
height: auto;
margin: 0px auto;
padding-top: 30px;
}
You would need to set every element above the <div> to 100% width, including the <html> tag.
I have edited my code and its tested.
HTML Code:
<div id="header" style="width:1500px;">
<div id="header_contain" style="min-width:980px;">
<table>
<tr>
<td>
<div style="width:500px;">
Hie, Div1 Content Here.!!
</div>
</td>
<td>
<div style="width:500px;">
Hie, Div2 Content Here.!!
</div>
</td>
<td>
<div style="width:500px;">
Hie, Div3 Content Here.!!
</div>
</td>
</tr>
</table>
</div>
</div>
CSS Code..something like this.
html, body
{
height: 100%;
margin: 0px;
padding: 0px;
font-family: arial, helvetica, sans-serif;
font-size:10pt;
overflow:auto;
}
#header
{
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
height: auto;
margin: 0px auto;
padding-top: 30px;
}
If It will helps you then don't forget to improve your accept rates. Cheers. !!
#header
width: 100%;
height: 85px;
background: #006666;
position:fixed;
z-index:999;
top:0;}
I use same color on header_contain div that I have already used in head div and this way I solve this problem.
#header
{
width: 100%;
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
width: 980px;
height: 85px;
background: #006666;
margin: 0px auto;
padding-top: 30px;
}
I'm having trouble with a background div cutting off randomly in Internet explorer...
Here is how it should look like, taken from a webkit/chromium browser..
Here is how Internet Explorer thinks it should look like...
The web page can be found at http://beta.surrealholidays.com.
any feedback on how to fix this would be appreciated.
HTML Source:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="/css/alt.css" rel="stylesheet" type="text/css">
<meta name="robots" content="all">
<meta name="author" content="surrealholidays.com">
<meta name="robots" content="index,follow">
<meta name="SKYPE_TOOLBAR" content ="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>
<link rel="shortcut icon" href="http://www.surrealholidays.com/images/logo.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<script src="/js/flash.js" type="text/javascript"></script>
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
<title>Welcome to Surreal Holidays</title>
</head>
<body class="oneColFixCtr">
<div id="bannerph">
<div id="bannerint">
<div id="logoph" align="left">
<p><img src="/images/logos/newlogo.png" width="204" height="99" alt="Site Logo"></p>
</div>
<div id="callus" align="right">
<p><br>
Call Us:</p>
<h1>0845 003 5043</h1></div>
<p> </p>
</div>
</div>
<div id="page">
<div id="links">
Homepage Luxury Destinations Private Tours Terms & Conditions Enquire News Contact Us</div>
<div id="ct">
<div id="navig">
<div class="c2 c1" id="navi_direc">
<div align="left">Homepage ></div>
</div>
<div id="navi_newsl"> Subscribe to our Latest Offers</div>
</div>
<div id="img">
<p><img src="/images/mainstory.jpg" width="995" height="400"> </p>
</div>
<div id="content">
<div id="hp_welcome">
<h2 align="left">Private Luxury Escorted Tours in Thailand </h2>
<p align="left"> </p>
<p align="left" class="c2"><strong>At Surreal Holidays, you can really feel the passion for Thailand. From the first moment you contact our experienced team, you will be amazed by the in-depth local knowledge and deep love of the country and its people that you encounter. Not surprising! Some of us were born and raised in Thailand before moving to the UK. You will find we have a unique ability to understand how travellers from the UK can experience the best Thailand has to offer. No ordinary travel company, Surreal Holidays can tailor a holiday especially for you. Along the way, your experience will be enhanced by our high levels of customer service and thoughtful personal touches.</strong></p>
<p class="c2"> </p>
<h2 align="left" class="c3"><strong>Bespoke Holidays to Thailand</strong></h2>
<p align="left" class="c2"></p>
<p align="left" class="c2"><strong>Our founder's inspiration: "..like you, when I travel, I use all my senses to enhance the experience. This often leads to a "surreal" feeling, as though the holiday is a dream like state where the strange and bizarre juxtaposition with the calm and beautiful. Nowhere epitomises this more than Thailand, my homeland. Whether you are looking for an inspirational island hopping itinerary or romantic wedding and honeymoon locations, soft adventure activities or cultural experiences, you need look no further. Thailand offers much more than just a place to relax on a beach. You can discover unique flora and fauna, stunning marine parks, and breathtaking scenery at every turn. Indeed, there really is something for everyone in our Amazing Thailand."... Runci Weeden</strong></p>
<p align="left" class="c2"> </p>
<h2 align="left" class="c3"><strong>Unique Holidays to Thailand</strong></h2>
<p align="left" class="c2"></p>
<p align="left" class="c2"><strong>To find out more information on our Escorted Tour Holidays, including Nature Tours, Cultural Tours or Adventure Tours to Thailand, call 0845 003 5043 and speak to our friendly team.</strong></p>
<p align="left" class="c2"> </p>
</div>
<div id="col2">
<div id="hp_ftcol2off">
<h3 align="center"><strong>Our Latest Offers</strong></h3>
<p align="center"> </p>
<p align="center">
<h3>Offers Coming Soon!</h3>
</p>
<p align="center"> </p>
<h3 align="center">Layana Resort and Spa<br>
From £89 pppn
</h3>
<p> </p>
</div>
<div id="hp_ftcol2foll">
<h3>Follow Us</h3>
<p align="center" class="c2"><img src="/images/social_icons/facebook.png" alt="Find us on Facebook" width="64" height="64" border="0"><img src="/images/social_icons/twitter.png" alt="Follow us on Twitter" width="64" height="64" border="0"><img src="/images/social_icons/google.png" alt="Find us on Google Plus" width="64" height="64" border="0"><img src="/images/social_icons/youtube.png" alt="Watch us on Youtube" width="64" height="64" border="0"><img src="/images/social_icons/vimeo.png" alt="Watch us on Vimeo" width="64" height="64" border="0"><br>
<br>
</p>
</div>
<div id="hp_ftcol2news">
<h3><strong>Latest News</strong></h3>
<h3>20 March 2012</h3>
<h3><u><strong>Welcome To Our New Website!</strong></u>
<br>
We have now launched our brand new website, for an improved compatability for Tablet Devices, as well as a much faster loading speed for a enhanced browsing experience. For more information about this update, <br>
<u>Click Here</u>.</h3>
<p> </p>
<p align="center" class="c2"><br>
<br>
</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="f_tr">
<br>
Tel: 0845 003 5043 (Local Rates from a BT Landline) , 01628 685 550<br>
<strong>© Surreal Holidays Ltd. 2009-2012 All Rights Reserved.</strong><br>
<div id="f_php">
<div id="f_ph1"><img src="/images/logos/logo-amazing.png" width="145" height="45" alt="Thailand"></div>
<div id="f_ph2">
<p>Surreal Holidays is the Trading Name of Surreal Holidays Ltd. Company Number: 06690344<br>
Disclaimer | Privacy Policy | Copyright</p>
</div>
<div id="f_ph3">
<img src="/images/logos/logo-atol.png" width="45" height="45" alt="A"><img src="/images/logos/logo-atta.png" width="45" height="45" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
</div>
</div>
</div> <!-- Closing Tags For #Footer -->
</div>
</body>
</html>
And here is the stylesheet:
#charset "utf-8";
/* CSS Document */
a:link {
color: #fff;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #fff;
}
a:hover {
text-decoration: underline;
color: #fff;
}
a:active {
text-decoration: none;
color: #fff;
}
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
background: url(/images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#page {
width:995px;
margin: 0 auto;
padding: 0px;
}
#ct {
background-image:url(/images/bg.png);
overflow:visible;
}
#bannerph {
width: 100%;
background-image:url(/images/banner.png)
}
#bannerint {
width: 995px;
height: 140px;
padding: 10px;
margin: 0 auto;
}
#logoph {
width: 300px;
float: left;
padding: 10px;
}
#callus {
width: 500px;
float: right;
}
#links {
background-image: url(/images/logos/li.jpg);
background-repeat: repeat-x;
color: #fff;
vertical-align: middle;
padding: 10px;
margin-bottom: -2px;
}
#linkblock{
padding: 10px;
}
#navig {
height: 30px;
width: 995px;
padding: 10px;
}
#navi_direc{
float:left;
width: 500px;
font-size: 12px;
padding-left: 10px;
padding-right: 10px;
}
#navi_direc a {
color: #000
}
#navi_newsl{
float: right;
width: 449px;
font-size: 12px;
}
#content {
height: auto;
background-image: url(/images/mainbggrad.jpg)
font-size: 12px;
overflow:hidden;
}
#content h2 {
font-size: 18px;
color: #7d6543;
font-weight: bold;
line-height: 22px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 5px;
}
#content h3 {
font-size: 14px;
font-weight: normal;
color: #fff;
line-height: normal;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}
#content h4 {
font-size: 13px;
font-weight: normal;
line-height: normal;
color: #8A5D3C;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}
#content h5 {
margin: 0px;
font-size: 12px;
font-weight: normal;
line-height: normal;
color: #8A5D3C;
padding-left: 10px;
padding-right: 10px;
}
#col2 {
line-height: normal;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 5px;
font-size: 12px;
color: #FFF;
}
#content p {
line-height: normal;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 5px;
font-size: 12px;
color: #000;
}
#hp_welcome{
width: 550px;
float:left;
padding: 10 px;
color: #7d6543;
}
#hp_ftcol2off {
width:380px;
float:right;
margin: 10px 10px 0 10px;
background-image: url(/images/logos/news.jpg);
background-repeat: repeat-y;
border-radius: 10px;
}
#hp_ftcol2news {
width:380px;
float:right;
margin: 10px 10px 10px 10px;
background-image: url(/images/logos/news.jpg);
background-repeat: repeat-y;
border-radius: 10px;
color: #FFF;
}
#hp_ftcol2foll {
width:380px;
float:right;
margin: 10px 10px 10px 10px;
background-image: url(/images/logos/news.jpg);
background-repeat: repeat-y;
border-radius: 10px;
color: #FFF;
}
#hp_ftcol2off table tr td {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
}
#container_hp{
width: 995px;
height: auto;
overflow:auto;
}
#f_tr{
height:auto;
}
#f_php{
width: 995px;
height: 60px;
}
#f_ph1{
width:325px;
float:left;
}
#f_ph2{
width:340px;
float:left;
}
#f_ph3{
width:325px;
float:left;
}
#footer {
font-size: 12px;
color: #fff;
background-image: url(/images/logos/ftr.jpg);
background-repeat: repeat-x;
height: 150px;
padding-bottom: -5px;
}
#callus {
padding-right: 30px;
}
#navi_newsl a:link {
color: #000;
text-decoration: none;
}
#navi_newsl a:visited {
text-decoration: none;
color: #000;
}
#navi_newsl a:hover {
text-decoration: underline;
color: #000;
}
#navi_newsl a:active {
text-decoration: none;
color: #000;
}
.oneColFixCtr #bannerint #callus h1 {
color: #7d6543;
}
.oneColFixCtr #bannerint #callus p {
color: #7d6543;
}
#warning {
background-image:url(/images/warning%20bar.png);
height: 50px;
background-repeat:no-repeat;
}
#intwarn {
margin: 13px;
}
#intwarn p {
color: #fff
}
#warning #intwarn p {
font-size: 20px;
}
.oneColFixCtr #page #content table {
text-align: left;
font-size: 12px;
}
.oneColFixCtr #page #content #col2 #hp_ftcol2news {
color: #FFF;
}
.oneColFixCtr #page #content #col2 #hp_ftcol2news p b {
color: #FFF;
text-decoration: underline;
}
If anyone has suggestions on how I can stop these divs cutting off prematurely (bannerph and ct) I would be extremely thankful.
The default value for a div overflow is visible so declaring this in the CSS wouldn't have any effect unless you were overriding it from elsewhere.
Try using overflow: hidden; on #ct and #col2 as this should clear the floating column on the right.
It would help to know the exact version of the ie browser that is showing this issue. I tested the site in ie 7 and firefox and could not replicate the issue. in ie7 the div is not cut off, but you also do not have opacity on it as well. I would suggest elaborating on the details a little bit, because it could be a number of compatibility issues you are having. All the comments and answers so far have been guesses since we do not have all the information needed to determine the root cause.
I have created a skin for DotNetNuke 5.x and I attempted to do as much of the layout using css as I could. My issue is the consistency between IE and FF/Chrome/Safari. With most sites I'm able to overcome this, but in this skin I have tried everything I could think of and spent many many hours trying to get the look consistent between the two. When I fix one, the other would break. Can anyone help me fix this? Please take a look at the skin here in both IE and FF to see the difference:
http://bluebookbasement.coultertechnologies.com
BlueBookBasement_full.ascx
<%# Control language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%# Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>
<%# Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%# Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
<%# Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %>
<%# Register TagPrefix="dnn" TagName="TEXT" Src="~/Admin/Skins/Text.ascx" %>
<%# Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>
<%# Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
<%# Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
<%# Register TagPrefix="dnn" TagName="LINKS" Src="~/Admin/Skins/Links.ascx" %>
<%# Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
<%# Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>
<%# Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
<%# Register TagPrefix="dnn" TagName="STYLES" Src="~/Admin/Skins/Styles.ascx" %>
<div id="ControlPanel" runat="server" />
<div id="mainbody">
<div id="container">
<div id="top_banner">
<div style="float:left; "><dnn:LOGO runat="server" id="dnnLOGO" /></div>
<div id="top_banner_right"> </div>
</div>
<div id="content">
<div id="content_top_left">
<div id="content_top_right">
<div id="top_nav">
<div id="nav_left">
<div id="nav_right">
<div id="nav_main">
<dnn:NAV
runat="server"
id="dnnNAV"
ProviderName="DNNMenuNavigationProvider"
IndicateChildren="false"
ControlOrientation="Horizontal"
CSSNodeRoot="main_dnnmenu_rootitem"
CSSNodeHoverRoot="main_dnnmenu_rootitem_hover"
CSSNodeSelectedRoot="main_dnnmenu_rootitem_selected"
CSSBreadCrumbRoot="main_dnnmenu_rootitem_selected"
CSSContainerSub="main_dnnmenu_submenu"
CSSNodeHoverSub="main_dnnmenu_itemhover"
CSSNodeSelectedSub="main_dnnmenu_itemselected"
CSSContainerRoot="main_dnnmenu_container"
CSSControl="main_dnnmenu_bar"
CSSBreak="main_dnnmenu_break" />
</div>
</div>
</div>
</div>
</div>
</div>
<div id="middle_left">
<div id="middle_right">
<div id="indent_left">
<div id="indent_right">
<div id="breadcrumbs">
<dnn:TEXT runat="server" id="dnnTEXT" CssClass="breadcrumb_text" Text="You are here >" ResourceKey="Breadcrumb" />
<dnn:BREADCRUMB runat="server" id="dnnBREADCRUMB" CssClass="Breadcrumb" RootLevel="0" Separator=" > " />
</div>
<div id="BannerPane" class="BannerPane" runat="server"></div>
<div id="TopPane" class="TopPane" runat="server"></div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td class="leftpane" id="LeftPane" runat="server" valign="top"></td>
<td class="contentpane" id="ContentPane" runat="server" valign="top"></td>
<td class="rightpane" id="RightPane" runat="server" valign="top"></td>
</tr>
<tr>
<td colspan="3">
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td class="mid3" id="Mid1Pane" runat="server" valign="top"></td>
<td class="mid3" id="Mid2Pane" runat="server" valign="top"></td>
<td class="mid3" id="Mid3Pane" runat="server" valign="top"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="leftcontentpane" id="LeftContentPane" runat="server" valign="top" colspan="2"></td>
<td class="rightpane" id="RightSidePane" runat="server" valign="top"></td>
</tr>
<tr>
<td class="leftpane" id="LeftSidePane" runat="server" valign="top"></td>
<td class="rightcontentpane" id="RightContentPane" runat="server" valign="top" colspan="2"></td>
</tr>
</table>
<div id="BottomPane" class="BottomPane" runat="server"></div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div id="content_bottom">
<div id="content_bottom_left">
<div id="content_bottom_right">
<div id="content_bottom_middle">
<div id="prefooter">
<div class="leftSide">
<dnn:links runat="server" id="dnnLINKS" CssClass="links" Level="Root" Separator=" | " />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_left">
<div id="footer_right">
<dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" CssClass="footertxt" /> |
<dnn:TERMS runat="server" id="dnnTERMS" CssClass="footertxt" /> |
<dnn:PRIVACY runat="server" id="dnnPRIVACY" CssClass="footertxt" /> |
<dnn:USER runat="server" id="dnnUSER" CssClass="footertxt" /> |
<dnn:LOGIN runat="server" id="dnnLOGIN" CssClass="footertxt" />
</div>
</div>
</div>
</div>
</div>
Skin.css
BODY
{
background-color:#214081;
height:100%;
margin:0px;
padding:0px;
}
#mainbody
{
background-image:url(images/home_2_01.jpg);
background-repeat:repeat-x;
background-position:top;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: center;
}
#container
{
width:979px;
padding: 0;
text-align:center;
margin: 0 auto;
}
a
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
font-style:normal;
text-decoration:none;
color:#000000;
}
.clear
{
clear:both;
}
#top_banner
{
/*background-image:url(images/top_banner.gif);
background-repeat:no-repeat;
background-position:top;
width:979px;*/
height:145px;
}
#top_banner_right
{
float:right;
color:#FFFFFF;
font-size:20px;
line-height:25px;
padding-top:70px;
}
#content
{
background:#fff url(images/home_2_05.jpg) repeat-x top;
/*background-color:#fff;*/
min-height:414px;
padding:0px;
margin:0px;
}
#content_top_left
{
background-image:url(images/home_2_04.jpg);
background-repeat:no-repeat;
background-position: left top;
height: 65px;
padding:0px; margin:0px;
}
#content_top_right
{
background-image:url(images/home_2_06.jpg);
background-repeat:no-repeat;
background-position: right top;
height: 65px;
padding:10px 10px 0px 10px; margin:0px;
/*width:100%;*/
}
#content_bottom
{
background:url(images/home_2_27.jpg) repeat-x bottom;
height: 63px;
padding:0px;
margin:0px;
}
#content_bottom_left
{
background:url(images/home_2_26.jpg) no-repeat bottom left ;
height: 63px;
padding:0px;
margin:0px;
}
#content_bottom_right
{
background:url(images/home_2_30.jpg) no-repeat bottom right;
height: 63px;
padding:0px;
margin:0px;
}
#content_bottom_middle
{
background:url(images/home_2_28.jpg) no-repeat bottom center;
height: 63px;
padding: 0px 0px 0px 0px;
margin:0px;
}
#content_all
{
/*padding: 16px;*/
}
#middle_left
{
background-image:url(images/home_2_21.jpg);
background-repeat:repeat-y;
background-position: left;
padding: 0px;
margin:0px;
}
#middle_right
{
background-image:url(images/home_2_22.png);
background-repeat:repeat-y;
background-position: right;
padding:0px;
margin:0px;
}
#indent_left
{
background:url(images/home_2_13.jpg) no-repeat top left;
padding: 0px; margin:0px;
}
#indent_right
{
background:url(images/home_2_15.jpg) no-repeat right top;
padding: 0px 16px 0px 16px; margin:0px 0px 0px 0px;
overflow: auto;
/*width: 979px;*/
}
#top_nav
{
background-image: url(images/home_2_10.jpg);
background-repeat: repeat-x;
background-position: top;
/*width:943px;*/
height:63px;
}
#nav_left
{
/*width: 18px;*/
height: 63px;
background-image: url(images/home_2_08.jpg);
background-repeat: no-repeat;
background-position: top left;
padding: 0px;
margin: 0px;
/*float: left;*/
}
#nav_right
{
/*width: 21px;*/
height: 63px;
background-image: url(images/home_2_12.jpg);
background-repeat: no-repeat;
background-position: top right;
padding: 0px;
margin: 0px;
/*float: right;*/
}
#nav_main
{
padding-top: 10px;
height: 63px;
}
#video_sub
{
background-color:#7C7C7C;
padding:5px;
color:#FFFFFF;
text-align:center;
}
/*.main_tab
{
background-image:url(images/tab_bg.gif);
background-repeat:no-repeat;
background-position:top;
width:648px;
height:16px;
padding:15px;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
text-transform:uppercase;
}*/
#prefooter
{
margin: 0px;
text-align: left;
padding: 10px;
}
#footer
{
background-image:url(images/home_2_38.jpg);
background-repeat:repeat-x;
background-position:top;
height:95px;
margin-top: 20px;
text-align: left;
}
#footer_left
{
background-image:url(images/home_2_36.jpg);
background-repeat:no-repeat;
background-position:left top;
height: 95px;
}
#footer_right
{
background-image:url(images/home_2_40.jpg);
background-repeat:no-repeat;
background-position:right top;
height: 95px;
padding: 36px;
color: blue;
/*width: 1036px;*/
}
.footertxt
{
/*color: #fff;*/
}
td.footertxt {
font-family: verdana, arial, helvetica;
color: #FFF;
font-size:10px;
font-weight: normal;
}
a.footertxt:link, a.footertxt:visited {
font-family: verdana, arial, helvetica;
color: #FFF;
font-size:10px;
font-weight: normal;
text-decoration: none;
}
a.footertxt:hover, a.footertxt:active {
font-family: verdana, arial, helvetica;
color: #FFF;
font-size:10px;
text-decoration: underline;
font-weight: normal;
}
.controlpanel {
width: 100%;
background-color: #fff;
}
.rightpane {
width:27%;
/*margin-right:16px;*/
/*padding-top:10px;*/
padding: 0px 0px 0px 10px;
margin:0px;
}
.leftpane {
width:27%;
/*margin-right:16px;*/
/*padding-top:10px;*/
padding: 0px 10px 0px 0px;
margin:0px;
}
.contentpane, .TopPane, .BottomPane, .BannerPane {
/*width:668px;*/
}
.TopPane, .BottomPane, .BannerPane
{
}
.mid3
{
width:33%;
padding: 0px;
margin: 0px;
}
#breadcrumbs
{
text-align: left;
margin-left: 16px;
}
/* begin of menu*/
/*--------- dnn menu style ----------*/
/* main menu td */
.main_dnnmenu_bar
{
cursor:pointer;
font-size: 11px;
background-color:transparent;
width:970px;
}
/* Main Menu Normal */
.main_dnnmenu_rootitem
{
color: #fff;
font-size: 13px;
font-weight:bold;
text-align:center;
padding:12px 12px 12px 12px;
text-transform:uppercase; margin-right:1px;
white-space:nowrap;
float:left;
}
/* Main menu hover */
.main_dnnmenu_rootitem_hover
{
color:#214081;
font-size: 13px;
font-weight:bold;
text-align:center;
padding:12px 12px 12px 12px;
/*background:url(../images/menu_hover.gif) repeat-x top left;*/
text-transform:uppercase; margin-right:1px;
white-space:nowrap;
float:left;
}
/* Main menu selected */
.main_dnnmenu_rootitem_selected
{
color:#ffffff;
font-weight:bold;
text-align:center;
font-size: 13px;
padding:12px 12px 12px 12px;
/*background:url(../images/menu_active.gif) repeat-x top left;*/
text-transform:uppercase; margin-right:1px;
white-space:nowrap;
float:left;
}
/* SUB Menu Normal */
.main_dnnmenu_submenu
{
/*border:1px solid #C0D6E5;*/
margin-top: 0px;
margin-left: 3px;
background-color: #081E43;
z-index: 1000;
cursor: pointer;
cursor: hand;
border-top: #FFFFFF 1px solid;
border-right: #FFFFFF 1px solid;
border-left: #FFFFFF 1px solid;
border-bottom: #FFFFFF 1px solid;
filter: Alpha(Opacity=75, FinishOpacity=100, Style=1);
opacity: 0.75;
}
.main_dnnmenu_submenu td
{
/*background-color:#F8FAFF;*/
z-index: 1000;
font-size: 11px;
font-weight:bold;
text-align:left;
color:#fff;
line-height:2em;
padding: 0px 5px;
margin:0px;
}
/* SUB Menu hover & selected */
.main_dnnmenu_itemhover td
{
background: #CE0D0D url(../images/submenu_hover.gif) repeat-x top left;
color:#ffffff;
}
.main_dnnmenu_itemselected td{
background: #CE0D0D url(../images/submenu_active.gif) repeat-x top left;
color:#ffffff;
}
.main_dnnmenu_break
{
height: 2px;
background-color: #D5E0FF;
}
It's difficult to give useful advice without more detailed information. Have you tried installing the IE Developer Toolbar and Firebug so you can directly inspect each inconsistency and determine exactly what the differences are? I find those tools make it pretty easy to identify the consistency issues so that you can post a more specific question than "This page doesn't look the same in IE and Firefox". (I feel your pain though... it can be pretty difficult to fix these issues :S)
Ok I got it. The answer is to get it looking right in FF then in DNN under the host settings set your skin fallback to xhtml 1.0 strict instead of html 4. This will fix the issue.
Thanks for your help anurse.
#coultertech,
Setting the skin fallback doctype to XHTML is probably a good choice (it's only defaulted to HTML for legacy reasons). However, doctype information really belongs with the skin, itself (you may have one skin that is designed to work in HTML, and another designed to work in XHTML). To specify the doctype for the skin, see Cathal's blog post using Skin-level DocType's.