CODEWITHSUNDEEP
css
BarclayVision
BarclayVision

Reputation: 863

CSS alignment on different browsers

Don't use CSS very much so this might be a simple solution. I'm trying to align a dynamic date value on a jpg certificate in the lower righthand corner. its aligned on a fixed image line. Alignment looks great in safari browser, but shifts to the right on Chrome and Firefox and shifts far to the left in Internet Explorer. example fiddle: http://jsfiddle.net/jeffbarclay/evu1y9ao/

.certDate {
font-size:14pt;
font-family:Trebuchet MS;
font-weight:normal; 
position: absolute;  
top: 480px; 
left: 780px;   
}

Upvotes: 0

Views: 175

Answers (3)

BarclayVision
BarclayVision

Reputation: 863

resolved by adding <div class='certificate;> in place of img Thanks @Adam Milecki

.certificate {
background-image: url(http://www.mcfrsit.com/TestCert/quizimages/cert.png);
background-size: 100% 100%;
height: 300px;
width: 800px;
padding: 50px;
position: relative;
}

.certDate {
font-size: 14pt;
font-family: Trebuchet MS;
font-weight:normal;
position: absolute;
bottom: 50px;
right: 100px; 
}

.certHead {
font-size:40pt;
font-family:Trebuchet MS; 
position: absolute; 
top: 130px; 
left: 0; 
width: 100%;  
}

.certBody {
font-size:28pt;
font-family:Trebuchet MS;
font-weight:normal;
width: 100%;  
}

Upvotes: 0

noobdev98
noobdev98

Reputation: 101

Different browsers have different default-css rules. To factor all of that out, it is often best practice to download a normalize.css file and attach it to your projects. It adjusts things like the default body margins and padding so that everything is consistent. You can download it from here:

Normalise.css git

Hope this helps.

Upvotes: 0

Adam Milecki
Adam Milecki

Reputation: 1786

Use right and bottom instead of left and top.

.certDate {
    font-size: 14pt;
    font-family: Trebuchet MS;
    font-weight: normal; 
    position: absolute;  
    bottom: 0; 
    right: 0;   
}

Make sure the container has proper height and width and position is relative.

Upvotes: 1

Related Questions