CSS Bug 1

GRIFFIJ · Jun 11, 2014

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>

ChrisHirst · Jun 11, 2014

I have a created 4 DIVs that align perfectly

Align perfectly, ... Where?

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

GRIFFIJ · Jun 11, 2014

It Aligns perfectly in dreamweaver CC or me not sure how to change it to a table

ChrisHirst · Jun 11, 2014

A table? Why???

Okay, so how does it not align, and in what browser are you testing it?

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

vacunita · Jun 11, 2014

Aligned to what? The welcomes div? How should it look?

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

GRIFFIJ · Jun 11, 2014

In design view the countdown time is aligned under the countdown title. However when you preview it in IE it all aligned to the left so the titles don't align up

GRIFFIJ · Jun 11, 2014

Sorry phil it is I am trying align the countdown time to the DAYS, HOURS, MINUTES, SECONDS

ChrisHirst · Jun 11, 2014

Ok! So we need your background images before we can even hope to see the problem, because it is the IMAGE that isn't "lining up"

The answer to that is; ........... drum roll please

CSS Sprites

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

GRIFFIJ · Jun 11, 2014

This is what I want it to look like: I see this in design

Days Hours Minutes Seconds

440 23 34 12

When I preview in IE this is what I see

Days Hours Minutes Seconds

440 23 34 12

vacunita · Jun 12, 2014

Both look the same to me, [2thumbsup]

But I think I get what you want, however Cris is correct. We would need your background images to know exactly where your titles are placed.

However, as a rule of thumb, never trust what Dreamweaver shows you its almost never accurate. Preview all changes in a browser, and note that different versions of IE will render it slightly differently.

From What I can tell you would need to play around with the margins a little to adjust the position of you timer.

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

GRIFFIJ · Jun 12, 2014

Hi Phil is it possible to send it to you I am looking for a free PHP web hosting site for testing purposes

vacunita · Jun 12, 2014

I used 000webhost for a while to test. Its decent enough for most testing purposes.

http://www.000webhost.com/free-php-hosting

Try there.

You can upload your pictures to a sharing site like Photobucket and then post links to them here.

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

GRIFFIJ · Jun 12, 2014

Thanks phil

My page has been uploaded

http://griffij.comoj.com/

vacunita · Jun 12, 2014

o.k, if you set the margin-left for your daysbox div to 34% it should align correctly.

margin-left: 34%;

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

GRIFFIJ · Jun 13, 2014

Hi Phil thank you very much for your reply I thought I had replied last night but I didn't I change the numbers as you suggested however all it did was push the day box over to the right and it doesn't match up at all I was wondering if there's any way of making the those boxes static so no matter what those screen size is they remain in place.

vacunita · Jun 13, 2014

I checked in IE and Chrome, but you are right, different screen sizes will affect the position.

Try this instead:

I added a div around your time pieces, and remvoed the floats for the pieces. Then just centered them and added some margin.

It should maintain is centered position on most screen sizes. As long as they are larger than your image widths.

Note I changed the image paths so I could see them on my system. You can change them back.

CSS:

#container {
	background-image: url(../img/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(../img/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(../img/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(../img/countdowntimertitle.jpg);
	background-repeat: no-repeat;
	background-position: center;
}

#countdowntime
{
	overflow:hidden;
	width:980px;
	margin-left: auto;
	margin-right: auto;
	background-color:#f0f0f0;	
	text-align: center;
}

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

#daysBox {
	
	display:inline-block;
	top: 0px;
	padding: 0px;
	padding-top: 10px;
	height: 45px;

	
	border-width: 0px;
	border-style: solid;
	font-size: 30px;
	color: #2d3998;
	text-align:center;
}
#hoursBox {
	
	display:inline-block;
	padding: 0px;
	padding-top: 10px;
	height: 45px;
	
	
	border-width: 0px;
	border-style: solid;
	font-size: 30px;
	color: #2d3998;
	text-align:center;
}
#minsBox {
	
	display:inline-block;
	padding: 0px;
	padding-top: 10px;
	height: 45px;
	 
	
	border-width: 0px;
	border-style: solid;
	font-size: 30px;
	color: #2d3998;
	text-align:center;
}
#secsBox {
	
	display:inline-block;
	padding: 0px;
	padding-top: 10px;
	height: 45px;
	
	
	border-width: 0px;
	border-style: solid;
	font-size: 30px;
	color: #2d3998;
	text-align:center;
}

HTML:

<div id="container"></div>
<div id="welcomes">Welcomes</div>
<div id="namebar"></div>
<div id="in"></div>
<div id="countdowntitle"></div>
[b]<div id="countdowntime">[/b]
	<div class="timesect" id="daysBox">437</div>
	<div class="timesect" id="hoursBox">16</div>
	<div class="timesect" id="minsBox">27</div>
	<div class="timesect" id="secsBox">24</div>
[b]</div>[/b]
<script type="text/javascript">cdtd(); </script>

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

GRIFFIJ · Jun 13, 2014

Hi Phil

thank you very much for your advice I have put that into place and as you can see from the website the countdown timer appears orientated to the left with no formatting when I look at it in preview in Dreamweaver it looks perfect why is this such a difference between what I can see in preview and then when I posted to the web it looks completely different.

Thanks once again Joel

vacunita · Jun 13, 2014

the link

http://griffij.comoj.com/

still shows the unmodified HTML code. There are no changes. You need to make sure you upload after changing anything in DW.

Its appearing that different between DW and the browser, I would guess you are missing something when you view in the browser.

Your CSS has an error. You seem to have copied part of the CSS I added wrong into your file.

Code:

[b]#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;[/b]
[b][COLOR=#5C3566]div.timesect
{
	min-width:100px;	
	margin:0 30px;
}[/color][/b]

Missing a } to close countdowntitle. And you have also not added the css for the countdowntime div.

Make sure everything is exactly as the code in my other post.

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

GRIFFIJ · Jun 13, 2014

Hi Phil

I have taken down the whole website deleted what's in the public directory and re-uploaded it with the new code and still the timeclock appears to have no CSS I have checked it in Dreamweaver it hasn't CSS I upload it to the server and for whatever reason it seems to disappear.

I am sorry if you're getting really hacked off with this but I just want to be able to say that it works

thanks again Joel

vacunita · Jun 13, 2014

The HTML is still missing what I added. And the CSS is missing a part also.

Code:

#countdowntime
{
	overflow:hidden;
	width:980px;
	margin-left: auto;
	margin-right: auto;
	background-color:#f0f0f0;	
	text-align: center;
}

is not there.

The numbers now get the CSS styling correctly, you just need to add the extra HTML, and the missing css portion I added.

You are very close.

Again look at what I posted above, and what your HTML looks like.

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

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!

CSS Bug 1

Programmer

IS-IT--Management

Programmer

IS-IT--Management

Programmer

Programmer

Programmer

IS-IT--Management

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor