Jump to content
  • Advertisement
Sign in to follow this  
Xiachunyi

[web] Centering Text Problem

This topic is 4320 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hello, I am currently stuck trying to center text within a specific "div". In my current situation, the text appears to be centered, well a little offset, in Internet Explorer and Opera but not in Firefox -- it is left justified. The web page that displays the problem is here CSS Code:
p
{
	font-family: sans-serif;
	font-size: 12px;
	margin-top: 10px;
	margin-bottom: 10px;
}

...

.enclosure
{
	float: left;
	margin-top: 15px;
	margin-bottom: 5px;
	margin-left: 25px !important; margin-left: 10px;
	margin-right: 10px !important; margin-right: 25px;
	padding: 0px;
}

.img-shadow
{
	float: left;
	background: url(Data/Graphics/Misc/shadow.png) no-repeat bottom right;
}

.img-shadow img
{
	display: block;
	position: relative;
	background-color: #FFFFFF;
	padding: 3px;
	border: 1px solid #CECECE;
	margin: -6px 6px 6px -6px;
}

.discription
{
	display: block;
	padding: 0px;
	margin: auto;
	margin-top: 4px;
	margin-bottom: 4px;
	text-align: center;
	clear: both;
}

I thought that the problem may have come from utilizing "clear: both" but upon removal and just adding line breaks, the problem still exists. Thank you for your time.

Share this post


Link to post
Share on other sites
Advertisement
It looks like it may be inheriting the float: left attribute, because the area around "Testing!" only encompases the text. In FF, outline Block Level Elements and you'll see what I'm talking about. This tells me that it's being floated to the left, which is why it's stayin to the left. If you do float: none or find out where the float: left is being inherited from, that should fix this problemo.

Share this post


Link to post
Share on other sites
Yeah, inheriting seems to be the problem (althought float should not be inherited).

If you uncomment the float property from styleSheet.css so you get this

#content_attrib
{
/*float: left !important; float: none;*/
height: auto !important; height: 500px;
...

then the text is centered. Some other visual problems occur though, but you can at least use this as a starting point.

Share this post


Link to post
Share on other sites
Wow that was pretty impressive debugging work. I most likely would have never traced it back to the id.

From just trying, I don't think I will be able to overide an id for that web page without having to create a entirely separate style sheet.

On the plus, removing the "float: left" removed the annoying sudden resizing in Opera that I get whenever I mouse over the menu selections.

I will have to play around more and maybe do a compromise.

Thank you.

Share this post


Link to post
Share on other sites
Quote:
I will have to play around more and maybe do a compromise.


There are various ways you can construct your style sheet. What you have is one way and I'm sure if I did it, I would have things another way. CSS is flexible enough that you can set a style multiple (most of the time 2 or 3) ways, so keep at it. Your solution to this shouldn't have to be a big compromise, but possibly rethinking how you are designing the page.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!