Does my site look misaligned? |
  |
 May 31 2008, 02:21 PM
Post
#1
|
|
|
Senior Member  Group: Official Designer Posts: 323 Joined: Dec 2007 Member No: 601,314  |
I use IE. My site looks great in IE, but someone told me that it was messed up in FF.
Could someone here who uses FF tell me if it is messed up? Maybe it is just that one guy's computer and not nessisarily my fault. Thanks! The link is in my sig. |
|
|
|
|
May 31 2008, 02:23 PM
Post
#2
|
|
 AIDS at RAVES. Group: Official Designer Posts: 2,386 Joined: Dec 2007 Member No: 598,878 |
I sent you a screenshot oo and the link in your sig leads to createblog :/
|
|
|
|
|
May 31 2008, 02:25 PM
Post
#3
|
|
|
Senior Member Group: Official Designer Posts: 323 Joined: Dec 2007 Member No: 601,314 |
Ya I saw your screenshot. I just wanted another person to back it up to make sure it is not just your computer.
|
|
|
|
|
May 31 2008, 02:47 PM
Post
#4
|
|
|
Senior Member Group: Member Posts: 1,237 Joined: May 2008 Member No: 648,123 |
haha, i just clicked your link in a different thread and was about to PM you about the misalignment.
i'd suggest instead of styling your HTML within the document itself, use an external style sheet and call it in the header. that way you'll have all the positioning and styles in one file, instead of scattered about your website. CODE <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> or CODE <style type="text/css" media="screen"> @import "style.css"; </style> the latter is only recognized by modern browsers, so if you're expecting your site to be visited by people with outdated browsers, use the first example. |
|
|
|
|
May 31 2008, 02:54 PM
Post
#5
|
|
|
Senior Member Group: Official Designer Posts: 323 Joined: Dec 2007 Member No: 601,314 |
QUOTE(fixtatik @ May 31 2008, 02:47 PM)  haha, i just clicked your link in a different thread and was about to PM you about the misalignment. i'd suggest instead of styling your HTML within the document itself, use an external style sheet and call it in the header. that way you'll have all the positioning and styles in one file, instead of scattered about your website. CODE <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> or CODE <style type="text/css" media="screen"> @import "style.css"; </style> the latter is only recognized by modern browsers, so if you're expecting your site to be visited by people with outdated browsers, use the first example. I have 2 php files. One inclues the first half of the site (up to the content area) and the other has everything after the content area. So when I make a page, I include the 1st part, type my content, and then include the 2nd part. I dunno if that makes sense, but it works. In within those include files I have includes for css and stuff like that. How can I fix my site so it looks right in FF? grrrr I can't understand why someone would want to use FF. IE works perfectly fine for me. |
|
|
|
|
May 31 2008, 03:26 PM
Post
#6
|
|
|
Senior Member Group: Member Posts: 1,237 Joined: May 2008 Member No: 648,123 |
your best bet would honestly be starting from scratch. i can't tell just from looking at it quickly what the problems are, because you're putting styles in the divs themselves, like <div style="width:800px;">, etc.
if you use PHP, you'll be able to call each style sheet based on the page that you're using. try something like this: CODE <? $page = 'PAGE NAME'; include('header.php'); ?> content here <? include('sidebar.php'); include('footer.php'); ?> in your 'header.php' file, you can add a line of code telling browsers to call a style sheet based on the page: CODE <head> <? if($page == 'Home') { echo '<link rel="stylesheet" type="text/css" href="style.css" media="screen" />'; } else echo '<link rel="stylesheet" type="text/css" href="style2.css" media="screen" />'; ?> </head> the first code is how you'd set up all of your pages, saved as a .php extension. of course, your host has to support PHP. are you on a paid or free server? //edit: by the way, a lot of people use firefox because it supports web standards, while internet explorer doesn't. i.e. tends to make up its own HTML tags, round numbers, and display items incorrectly. more often than not, firefox, opera and safari will all display everything correctly the first time around, because they're all based around web standards. |
|
|
|
|
May 31 2008, 04:28 PM
Post
#7
|
|
|
Senior Member Group: Official Designer Posts: 323 Joined: Dec 2007 Member No: 601,314 |
So you think that is why it is not aligned? Cause I am styling in my PHP files and not in a stylesheet?
So for the PHP file, it should be like: CODE <div class="right">STUFF</div> And then in the stylesheet: CODE <style> div.left { position: absolute; left:123px; top:147px; width:151px; height:231px; overflow: none; } div.right { position: absolute; left:778px; top:147px; width:151px; height:231px; overflow: none; } div.content { position: absolute; left:300 px; top:357 px; width:447px; height:32px; overflow: none; } div.top { position: absolute; left:100 px; top:0 px; width:850px; height:380px; overflow: hidden; } </style> That doesn't really seem like it would make a difference. I know how I have stuff organized might seem messy, but I understand it and it is easy for me. So I only want to change it if I really need to. BTW, I use the same stylesheet for everypage, so I don't need to call a different one for each page. I am a paid host (so yes, I have php). EDIT: I just changed the codes to what I put above, and it is messed up in IE too.... |
|
|
|
|
May 31 2008, 04:37 PM
Post
#8
|
|
|
Senior Member Group: Member Posts: 1,237 Joined: May 2008 Member No: 648,123 |
oh, i misread it. i thought you meant you had two style sheets.
but my point in using an external style sheet over how you have it set up right now is to make everything easier. instead of changing each page one at a time, you can change everything at once using a style sheet. the way you're doing it right now probably has some conflicting codes, which is why it looks messy in any web standards browser and looks great in internet explorer. and i was saying to do it the other way, because it would take forever for me to go through and see exactly where your problems are by looking at each div's style. there could be an incomplete code, a width that's 2 pixels too small, or some other issue that's showing up in firefox. my biggest reason behind this is to think about the future. how big do you plan on getting your site? i'd imagine if you're paying for web space then you'd like it to be successful. say one day you have 100 pages, and want to change your site's layout. it would take ages to go through and adjust each page, rather than one time in an external style sheet. //edit: the code you posted does explain some of the problems. you're using position:absolute; which in any browser will position an element exactly on a page. try something like this: CODE <style type="text/css" media="screen"> #main { display:table; margin:0 auto; width:900px; } #top { height:380px; width:100%; } #left { float:left; width:151px; } #content { float:left; width:447px; } #right { float:left; width:300px; } </style> <div id="main"> <div id="top"> text </div> <div id="left"> text </div> <div id="content"> text </div> <div id="right"> text </div> </div> the style sheet you'd put in its own file without the <style></style> tags, of course. |
|
|
|
|
May 31 2008, 04:40 PM
Post
#9
|
|
|
Senior Member Group: Official Designer Posts: 323 Joined: Dec 2007 Member No: 601,314 |
QUOTE(fixtatik @ May 31 2008, 04:37 PM) oh, i misread it. i thought you meant you had two style sheets. but my point in using an external style sheet over how you have it set up right now is to make everything easier. instead of changing each page one at a time, you can change everything at once using a style sheet. the way you're doing it right now probably has some conflicting codes, which is why it looks messy in any web standards browser and looks great in internet explorer. and i was saying to do it the other way, because it would take forever for me to go through and see exactly where your problems are by looking at each div's style. there could be an incomplete code, a width that's 2 pixels too small, or some other issue that's showing up in firefox. my biggest reason behind this is to think about the future. how big do you plan on getting your site? i'd imagine if you're paying for web space then you'd like it to be successful. say one day you have 100 pages, and want to change your site's layout. it would take ages to go through and adjust each page, rather than one time in an external style sheet. I don't have to go through each page. The styles for the divs are in the 2 php files. I just have to edit those and everything is changed.  Basicaly what I am saying is, instead of having the div styles in a seperate style sheet, I have them in a php file with the rest of the stuff I need to include. The PHP file is like this: CODE <html> <div class="left" style="position: absolute; left:123px; top:147px; width:151px; height:231px; overflow: none;"> <a href="linkurl">Link</a><br> <a href="2linkurl">another link</a><br> </div> <other stuff here> </html> I then I just include it at the top of all my pages. EDIT// QUOTE //edit: the code you posted does explain some of the problems. you're using position:absolute; which in any browser will position an element exactly on a page. try something like this: CODE <style type="text/css" media="screen"> #main { display:table; margin:0 auto; width:900px; } #top { height:380px; width:100%; } #left { float:left; width:151px; } #content { float:left; width:447px; } #right { float:left; width:300px; } </style> <div id="main"> <div id="top"> text </div> <div id="left"> text </div> <div id="content"> text </div> <div id="right"> text </div> </div> the style sheet you'd put in its own file without the <style></style> tags, of course. Could you explain that a little bit more? I think the positioning I am using is probably the problem. Thanks! |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: