CSS help on this website.

[Got Josh?]

http://biblioteca.funglode.net.do/revistaahora/?cat=10

ON Firefox for windows and IE, clic on a year, and look at the title it keeps being in the middle of magazine istead of bottom on Firefox for mac it works perfectly 🙁


Any help?

 

[angelwatt]

I'm seeing a lot of br tags in there. Usually that means you're not appropriately using CSS. The br tag should not be used for formatting. You also shouldn't have an empty div simply to add that border at the bottom of each item. Using border-bottom on the #magazine part does just fine. Also you have item with an id of magazine. That's invalid, a id must be unique on the page. Change it to a class instead. So get rid of the extra empty tags you have and use CSS to accommodate the design. I was able to use Firebug to achieve the same design while removing that extra stuff.

I'm not sure why you're seeing it fine on Firefox Mac, because every browser I try (Firefox, IE8, Safari, Opera) from Windows shows that info in the middle of the pic rather than the bottom. You may be viewing a cached version of the page or something.

 

[Got Josh?]

mind, copy pasting what you used to achieve the design, i can't seem to get to it... 🙁

 

[angelwatt]

mind, copy pasting what you used to achieve the design, i can't seem to get to it... 🙁

Well, it was all done from Firebug, so it doesn't really allow for copying and pasting those changes, and I couldn't save them either. Essentially though, it just involved using margin, padding, and border for the most part. Nothing fancy.

 

[Got Josh?]

i have been playing with it for the last three hours and i still cant get it done T__T

 

[angelwatt]

This is without tampering with any HTML, it simply trashes the junk HTML I mentioned earlier, and you should still get rid of it. I commented parts I added or modified.

#magazine {
	 width: 180px; float: left; margin: 5px 5px 5px 5px;
	 border-bottom: 1px solid #D8D8D8;/*new*/
	 text-align: center; /*new*/
}
#magazine div {/*new*/
	text-align: center;
}
#magazine h2 {
	font-size: 18%;
	/*position: absolute; removed*/
	color: #031F52;
	margin-top: 0px;/*was 90*/
	text-align: center;/*new*/
}
/* This is for empty and tags in #magazine and useless br tags*/
.blog_line, .blog_p, .publish {/*new*/
	display: none;
}
#magazine img {/*because of align="right" in html*/
	margin: 0 auto !important;
	float: none !important;
}
/* blog img revista */
.rthumb {
	border: solid 1px white; margin-top: 5px;
	/*margin-right: 45px; removed*/
}

 

[Got Josh?]

Thank you!!