Sat, 2005-10-08 21:42
I also posted this in the layout forum -
Hi there, i'm trying to switch my site over to php/css.... and i'm having some difficulties and i don't want to build out the page with more content until i fix what i'm already trying to do.
The website is blacksoxfan.com but i'm doing a test page before i move on....that page is at:
http://www.blacksoxfan.com/ted.php
and my css file is at
http://www.blacksoxfan.com/styles.css
Here are the problems:
In IE there is a space in between the top of my menu bar and the bottom of my header image that i don't think should be there.
In Firefox, the wrapper that is supposed to go outside of the page cuts through the content about half way through.
There is an icon that moves too.. it's the wc3.org icon that is properly placed in IE but moves underneath my featured cards section in Firefox. I would suspect that once i solve the wrapper problem i can go ahead and fix that easily.
The other problem i'm having is that i have done a poor job of making the page look the same in multiple browsers.. IE and Firefox for example.
I'm not an expert but i use dreamweaver and type all of my code...any help would be greatly appreciated .... thanks in advance
Ted
Sat, 2005-10-08 22:06
#1
Help with my layout...
Double posting is not good. Someone will let you know that.
You can click on the "x" in the upper right corner to remove the duplicate post.
For the extra space, IE is probably giving you double margins. To fix it try adding {display: inline;} to #feature.
Sat, 2005-10-08 22:16
#2
Help with my layout...
yeah i nixed the other one figured i'd start here ...
inline didn't fix it....
Sat, 2005-10-08 22:42
#3
Help with my layout...
Thanks for taking care of the other post. 
DW forgot <html> tags. This probably won't fix your problem, but might be a good to have.
WYSIWYG editors make troubleshooting tricky.
Sat, 2005-10-08 22:48
#4
Help with my layout...
had a quick look and I think firefox is actually doing what your code is telling it to do... I suspect that you are not developing in firefox. you need to develop in ff, validate your code and if all is working well there, you know the problems in IE are because of IE and not your code (most likely I should say), and therefore you can adjust your code accordingly.
IE might make it seem like your code is working, but that's only because it doesn't apply the standards correctly in some cases. therefore it is fooling you into believing the problem lies with ff when indeed it is probably your code.
in fact your HTML has 11 validation errors.
when you say you use dreamweaver but you type your code, can we assume you're not using the design view on there? this in itself can lead to many more problems.
with regards to your featured card, a quick fix in ff (haven't checked in ie) is to make your margin-top 20px. and your w3c button. did you try giving it an id and then clearing it in your css? I'd be more inclined to put it into a div than a <p>...
hope that's some help
larmyia
Sat, 2005-10-08 23:21
#5
Help with my layout...
Your problem is you're using floats for all your lower content. Floats are taken out of the normal flow of the document. FF renders this correctly so shows your container finishing just after your header; IE doesn't do this right so it shows you what you want to achieve. What you need to do is clear your floats. Do a search on the forum or in Google for clearing floats or clearfix.
EDIT: Actually, you probably don't need to use as many floats as you are. You could have your main div non-floated but give it a right margin wider than the width of your features div, then float features right. As the main div isn't floated, it'll stretch your container the way you want it. As long as the main div is always the longest, you won't need to both with clearing your floats.
Sat, 2005-10-08 23:51
#6
Help with my layout...
woah.... lots to swallow..thanks guys for the input....
okay: here's what i know how to respond to ....
larmyia -
Thanks so much. I am using the design view mixed with the code view .... i make the changes in the code and then hit refresh...and it seems to display correctly ... i certainly understand what you're getting at with IE... that's another reason i don't use it as my main browser. My code bites i'm sure... hehe, but not bad for my first work-up huh?
I'm not having problems with the featured card (as far as i can tell) ... the problem is with the gap between the menu bar and the banner image above it.
Tyssen -
Thanks for helping me with the floats.... i thought i should be using them more than i was...
I will definitely read up on clearfix and clearing floats.
I like this idea:
" You could have your main div non-floated but give it a right margin wider than the width of your features div, then float features right. As the main div isn't floated, it'll stretch your container the way you want it. As long as the main div is always the longest, you won't need to both with clearing your floats."
I guess my next question as follows is... does it look like i'm doing a half decent job. I'm a jake of all trades and i'm very good with computers ... i fix em, rebuildem, clean em...blah blah blah..and build a few pages here and there.... so if you feel like i'm conceptually missing something or that i just plain suck at this... feel free to let me know how bad i am
Okay ... so now a new question...
should i be coding this in .php or should i swap to .xhtml with some php involved?
Sun, 2005-10-09 01:34
#7
Help with my layout...
What you've done so far looks pretty good.
As for PHP/XHTML: you use scripting languages like PHP, ASP & JSP to dynamically output HTML/XHTML. It's not a case of swapping from PHP to XHTML, but rather HTML to XHTML as you currently have a HTML 4.0 doctype. PHP will output whichever variant you choose to go with.
Maybe a look at an article on doctypes will make things a bit clearer.
Sun, 2005-10-09 01:51
#8
Help with my layout...
Thanks Tyssen -
as you can probably tell, i'm kind of a wierd mix of knowing and not knowing...i did get this that php to alter which card was pulled for the featured cards section ..... that link will definitely help. In the meantime, i've ripped out the floats and border all of my "cells" (for lack of a better term) so that i can at least see them for now and then i'll remove the borders once i figure this thing out a little better....
check it out...i keep fumbling with both that php file and css file .... so check those links and you'll see what changes i've made.
Sun, 2005-10-09 02:03
#9
Help with my layout...
You need to apply a float to #featured. You'll also need to put it ahead of #main-copy in your source.
Sun, 2005-10-09 02:19
#10
Help with my layout...
too funny, i actually was in the middle of doing it...now i found some documentation on how to make the whole document line up better, i did that and it looks fine in firefox but in my design editor & IE it's all screwey again!! grrrr!! Not to mention, look at what the float is doing? Learning is fun!
Sun, 2005-10-09 02:23
#11
Help with my layout...
For the extra space (on the right margin), IE is giving you double margins. To fix it try adding {display: inline;} to #feature.
:-k deja vu
Sun, 2005-10-09 02:30
#12
Help with my layout...
got that fixed, i needed to add inline to the main copy (i think i understand this conceptually - now i just have to fix spacing again. Now look what it's done to my text... i've left the borders in just as a point of reference and it's being screwey again.....
Sun, 2005-10-09 09:17
#13
Help with my layout...
tgolden wrote:
i did that and it looks fine in firefox but in my design editor & IE it's all screwey again!! grrrr!!
ignore design view. it's ineffective and will never show you the real picture. it's pointless. just look straight in the browser
larmyia
Sun, 2005-10-09 10:15
#14
Help with my layout...
larmyia wrote:
ignore design view. it's ineffective and will never show you the real picture. it's pointless. just look straight in the browser
larmyia
lol...i have been using my website to check it .. i just upload and it works just fine! So now my question is... i'm quite happy with the way i got these two items to display, but... how do i push my featured item off the edge...i padded it to the right 10px and then accomodated that (or so i thought) in my #text style ... but no go.... any suggestions? Also, in IE i get a little bit of a space between the banner and the menu bar .... thoughts.
Mon, 2005-10-10 08:11
#15
Arrgggh
Okay so beside that problem, which i'm still having....
this page is giving me trouble in Firefox....might not be anything i can do about it but oh wel....
http://cgi3.ebay.com/ws/eBayISAPI.dll?ViewUserPage&userid=cards4hurricanerelief