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>
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
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
RE: CSS Bug
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
----------------------------------
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
RE: CSS Bug
RE: CSS Bug
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
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
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
RE: CSS Bug
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
My page has been uploaded
http://griffij.comoj.com/
RE: CSS Bug
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
RE: CSS Bug
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
CODE --> HTML
----------------------------------
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
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
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
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
CODE
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
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
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
----------------------------------
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
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
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