Jump to content

Broken Style Sheet

Faracus

By Faracus
in CSS

 Share

Recommended Posts

Faracus Member

Faracus

Posted
Posted (edited)

Hi there, I have a external style sheet, and every now and then I run in to a problem where a html tag breaks the css formatting and the broken part, just goes to the top left of the page. The ones that are the most common are <form> and <table>, the table one is what I am working on right now. Is there any way I can get it to not break the CSS and continue to display as normal? CSS: 

p.main{position:absolute;left:5%;top:10%;}

HTML/PHP

echo "<p class='main'>Weclome to Precinct 1's Information Page. This precinct is made up of 6 districts as shown on the map.<br /><br />The following people are currently online in this district.<br /><table border='1'><tr><th>Officers Currently Online</th></tr><tr><td>Members would show up here</td></tr></table></p>";

result: http://raccooncitypd.clanteam.com/RPD-Computer/precinctinformation.php?precinct=1

Edited by Faracus
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Why are you using position: absolute? When something is positioned absolutely, the rest of the elements of the page ignore its existence so there will probably be overlapping.

  • Like 1
Link to comment
Share on other sites
Faracus Member

Faracus

Posted
  • Author
Posted

If it works for me (most of the time), then whats the problem?? I don't see how any of these answers help me with my problem. I'm not trying to be rude here, but I only asked for help with this problem, not to be criticized on my work.

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

I don't know what you're seeing on your page, but what I see is that your table is currently behind the rest of the page on the top left corner due to positioning. There's also text ontop of some of your buttons for the same reason.I didn't really understand what part you want fixed and how you want it to look. Your <html> and <body> elements seem to have some default padding or margin which is causing a separation between the top edge of the window and your <img> elements. Part of the gap is also caused by the default margins of the paragraph elements.

Link to comment
Share on other sites
Faracus Member

Faracus

Posted
  • Author
Posted (edited)
I don't know what you're seeing on your page, but what I see is that your table is currently behind the rest of the page on the top left corner due to positioning. There's also text ontop of some of your buttons for the same reason.I didn't really understand what part you want fixed and how you want it to look. Your <html> and <body> elements seem to have some default padding or margin which is causing a separation between the top edge of the window and your <img> elements. Part of the gap is also caused by the default margins of the paragraph elements.
From my screen, and everyone else I get to look at the page, the only issue is the table, would a relative positioning be the solution to this then? EDIT: Even when switching to relative, the table breaks CSS and starts all over again. Edited by Faracus
Link to comment
Share on other sites
eTianbun Invested Member

eTianbun

Posted
Posted
If it works for me (most of the time), then whats the problem?? I don't see how any of these answers help me with my problem. I'm not trying to be rude here, but I only asked for help with this problem, not to be criticized on my work.
Nobody is criticizing your work, we are just trying to help you fix it, by telling you what you are doing wrong. Well, if thats how you want it, fine.
Link to comment
Share on other sites
Faracus Member

Faracus

Posted
  • Author
Posted
Nobody is criticizing your work, we are just trying to help you fix it, by telling you what you are doing wrong. Well, if thats how you want it, fine.
I'm sorry but just saying, well it's not the right way, isn't really telling me how to fix it. I am thankful for the help here, don't get me wrong.I have tryed to use other positioning elements, and I found that this one carry's over better through multiple browsers, and is more accurate. But with both absolute, and relative positioning the table still ignores the CSS, and I don't want to have to write in a new block of CSS just to position a table, in case I want to continue the text below it.
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

if you don't want to take the advice to use positioning because it's not the preferred practice for laying out a website, then that's your decision. I will just add that the best practices, preferred, and still consistent and cross browser compatible way to layout a page is using CSS paddings and margins. While you might think positioning is doing the trick now, you will find as monitor/browser window sizes change when your site is viewed, everything will be off because positioning forces an element into a place irregardless of it's surrounding elements. It will also get more difficult as your site and the markup needed to create increase. Typically you want a layout to stay together when the size of the viewport is changed. Positioning is used for specific cases, like overlay, tooltips, etc, but not for general layout. You shouldn't take it personally if people are trying to help you code a better page.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...