Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Bug 1

Status
Not open for further replies.
GRIFFIJ

GRIFFIJ

Programmer
Aug 29, 2002
43
0
0
GB
Hi I was wondering if someone could help me with a CSS bug I have.

I have a created 4 DIVs that align perfectly but when I view it in a web browser it is not in alignment and I am not sure why? please help.

Kind Regards

CSS Code

#container {
background-image: url(../images/Images/finishedimages/Images/logo.jpg);
background-repeat: no-repeat;
background-position:center;
padding: 0px;
height: 355px;
width: 980px;
margin-right: auto;
margin-left: auto;
margin-bottom: auto;
border-width: 0px;
border-style: solid;
}
#welcomes {
padding: 0px;
height: 72px;
width: 980px;
margin-right: auto;
margin-left: auto;
border-width: 0px;
border-style: solid;
font-size: 60px;
color: #2d3998;
text-align:center;
}
#namebar {
padding: 0px;
height: 78.5px;
width: 980px;
margin-right: auto;
margin-left: auto;
border-width: 0px;
border-style: solid;
background-image: url(../images/Images/finishedimages/Names/namebar.jpg);
background-repeat: no-repeat;
background-position: center;
}
#in {
padding: 0px;
height: 80px;
width: 980px;
margin-right: auto;
margin-left: auto;
border-width: 0px;
border-style: solid;
background-image: url(../images/Images/finishedimages/Words/in.jpg);
background-repeat: no-repeat;
background-position: center;
}
#countdowntitle {

padding: 0px;
height: 45px;
width: 980px;
margin-right: auto;
margin-left: auto;
border-width: 0px;
border-style: solid;
background-image:url(../images/Images/finishedimages/Words/countdowntimertitle.jpg);
background-repeat: no-repeat;
background-position: center;
}
#daysBox {

float:left;
top: 0px;
padding: 0px;
padding-top: 10px;
height: 45px;
width: 80px;
margin-right: auto;
margin-left: 308px;
border-width: 0px;
border-style: solid;
font-size: 30px;
color: #2d3998;
text-align:center;
}
#hoursBox {

float:left;
padding: 0px;
padding-top: 10px;
height: 45px;
width: 90px;
margin-right: auto;
margin-left: 55px;
border-width: 0px;
border-style: solid;
font-size: 30px;
color: #2d3998;
text-align:center;
}
#minsBox {

float:left;
padding: 0px;
padding-top: 10px;
height: 45px;
width: 125px;
margin-right: auto;
margin-left: 55px;
border-width: 0px;
border-style: solid;
font-size: 30px;
color: #2d3998;
text-align:center;
}
#secsBox {

float:left;
padding: 0px;
padding-top: 10px;
height: 45px;
width: 125px;
margin-right: auto;
margin-left: 55px;
border-width: 0px;
border-style: solid;
font-size: 30px;
color: #2d3998;
text-align:center;
}

HTML

<!doctype html>
<html>
<head>

<link href="CSS/mystyle.css" rel="stylesheet" = type="text/css">

<script type="text/javascript">
function cdtd ()

{
var disney = new Date("August 25, 2015 03:00:00");
var now = new Date ();
var timeDiff = disney.getTime() - now.getTime();

var seconds = Math.floor(timeDiff / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);

hours %= 24;
minutes %= 60;
seconds%= 60;

document.getElementById("daysBox").innerHTML = days;
document.getElementById("hoursBox").innerHTML = hours;
document.getElementById("minsBox").innerHTML = minutes;
document.getElementById("secsBox").innerHTML = seconds;

var timer = setTimeout ('cdtd()', 1000);


}
</script>


</head>

<body>
<div id="container"></div>
<div id="welcomes">Welcomes</div>
<div id="namebar"></div>
<div id="in"></div>
<div id="countdowntitle"></div>
<div id="daysBox">D</div>
<div id="hoursBox">H</div>
<div id="minsBox">M</div>
<div id="secsBox">S</div>
<script type="text/javascript">cdtd(); </script>
</body>
</html>
 
Sort by date Sort by votes
Hi Phil,

please find an up-to-date copy of the web page I cannot find where your CSS differs from mine i.e. the font is correct the size is correct however the positioning is not I cannot believe that I am so close yet so far could you please point me in the right direction

kind regards Joel

 
Upvote 0 Downvote
Your CSS is missing the countdowntime section bolded and in red below.

Code: 
#countdowntitle {
		
	padding: 0px;
	height: 45px;
	width: 980px;
	margin-right: auto;
	margin-left: auto;
	border-width: 0px;
	border-style: solid;
	background-image:url(../img/countdowntimertitle.jpg);
	background-repeat: no-repeat;
	background-position: center;
}

[COLOR=#A40000][b]#countdowntime
{
	overflow:hidden;
	width:980px;
	margin-left: auto;
	margin-right: auto;
	background-color:#f0f0f0;	
	text-align: center;
}[/b][/color]

div.timesect
{
	min-width:100px;	
	margin:0 30px;
}

and

Code: 
#countdowntitle {
		
	padding: 0px;
	height: 45px;
	width: 980px;
	margin-right: auto;
	margin-left: auto;
	border-width: 0px;
	border-style: solid;
	background-image:url(../Images/finishedimages/Words/countdowntimertitle.jpg);
	background-repeat: no-repeat;
	background-position: center;
}
div.timesect
{
	min-width:100px;	
	margin:0 30px;
}


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Hi Phil,

thank you very much I figured out what I was doing wrong I was saving it locally not uploading it to the server so thank you very much all your help you have been immense.

One last question is there a way of dividing your HTML code so that you have different stylesheets for different pages?

Thanks Joel
 
Upvote 0 Downvote
Well you can load different stylesheets for each page.
i.e:

<link href="CSS/myotherstyle.css" rel="stylesheet" = type="text/css">

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
317
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
156
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
119
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
144
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
62
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top