×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

*
*
*
*

Thanks. We have received your request and will respond promptly.

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

CSS Bug

thread215-1733139

CSS Bug

CSS Bug

(OP)
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>

RE: CSS Bug

Quote:

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

RE: CSS Bug

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

RE: CSS Bug

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

RE: CSS Bug

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

RE: CSS Bug

(OP)
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

RE: CSS Bug

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

RE: CSS Bug

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

RE: CSS Bug

(OP)
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

RE: CSS Bug

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

RE: CSS Bug

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

RE: CSS Bug

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

RE: CSS Bug

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

RE: CSS Bug

(OP)
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.

RE: CSS Bug

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.

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

CODE --> HTML

<div id="container"></div>
<div id="welcomes">Welcomes</div>
<div id="namebar"></div>
<div id="in"></div>
<div id="countdowntitle"></div>
<div id="countdowntime">
	<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>
</div>
<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

RE: CSS Bug

(OP)
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

RE: CSS Bug

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

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

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

RE: CSS Bug

(OP)
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

RE: CSS Bug

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

RE: CSS Bug

(OP)
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

RE: CSS Bug

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

CODE --> MyCSS

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

and

CODE --> YourCSS

#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

RE: CSS Bug

(OP)
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

RE: CSS Bug

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login
Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close