Hi there, On my friends website when the window size is reduced (or a low resolution is used), the top right 'cartoon' image gets moved down to nearer the bottom of the page, which is not ideal Is there a way of fixing this background image where it is, so even if you have a low resolution the image will still be in the top right position? You can see what I mean here: http://www.adamsinicki.com/ Thanks for any help offered. (sorry posted this elsewhere as I realised it could be CSS related, not just HTML/design related...)
The bug is still there for me when in IE if you click the Restore Down box at the top right of the screen (second small box) and make the window smaller, the cartoon picture of the man jumps down to the bottom of the page - as if there is not enough room for it Thanks for any help...
Would really appreciate any help on this matter Is there any way of keeping the image stored in its position no matter what someones screen resolution/size is? Thanks...
What cartoon? The guy in the red shirt? I just checked in fake IE6 4 Linux and I don't see ANYTHING moving down except the menu wraps beneath. (nor FF nor Opera) 800x600 resolution looks good too. Can yoyu post a screenshot? Esp since this site is built in tables (gaw****ch), it's quite stable with the whole page having a set width, forcing all (it seems?) browsers to make a horizontal scrollbar (like it should). If this were a floats-page I'd expect it was float-drop. That's not going on here though.
I had uploaded some changes to the URL so it probably (hopefully) seems okay now. However because I used tables I have had to use some messy content on some pages - I had to use multiple <p> </p> lines to get the content in the second column to force its way to the top. Does anyone know if theres a way around this?
I'll only give you an example, cause you've already got some other major issues that need to be addressed. Instead of table cellpadding=0 cellspacing=0 border=0 stuff in the html, what you do is, in the CSS, start out with nothing using table { border-collapse: collapse; } This takes the place of all that cell stuff. Everything then goes to zero. Now you can set spacing like you want. It looks like macho guy in the red shirt is in one huge td. So, okay, you can maybe give that one a class so the spaces you set on it aren't also set on all the others. <td class="macho"> in the HTML maybe. CSS: td.macho { padding: 10px 5px; } Or something like that. The first number there is top and bottom padding (10px) and the second number is your sides padding. I guessed those numbers cause you've only got one non-breakingspace per <p> . ------------------------------------------------------------- Now, the problems: <!-- saved from url=(0022)http://internet.e-mail --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" This cannot fly, even if it manages to limp along in many browsers : ) First, having anything before the doctype, even hitting the ENTER key (a newline) or a space, ANYTHING, makes IE 6 and I think also 7 go into "Quirks mode" which was designed so that all those crappy old sites built for IE (which generally don't have any doctype anyway) still show up the same in IE6 (and 7). So, that comment needs to go somewhere else. Anywhere else. Second, XHTML1.1 needs to be real, true, XML. You don't have that because later you've got <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> (which is what you want). XHTML 1.1 cannot be served as text/html. XHTML 1.0 can though. You need to do this because IE doesn't know what to do if you'd served it as application="xml/xhtml" or whatever it is for real XML documents. You don't need your HTML to be X anything-- the RSS will work still (it's XML, sure, but the page doesn't have to be). So, change that Doctype to either XHTML 1.0 or HTML4.01 Strict. Either are good. Third, if you stick with XHTML, in case some day IE ever gets its thumb out of its butt (not planned for IE8 anyway) and you wanted this to be a real XML page someday, there are only 5 character entities you may use (and one nobody uses because HTML doesn't understand it, so you're really limited to 4), and &nb sp; is not one of them. You get to use & < > and " Code (markup): I mean, since you're sending the page as text/html the &nb sp; is okay, but if you're just forward-thinking about the page, then keep this in mind. My old sites still have &nb sp; while XHTML 1.0 but I've tried to correct that in my newer pages (not that they'll ever get turned into XML anytime this century : ) Lastly, even if you don't understand what it spits out, try (after changing the doctype) sending this page to the HTML validator http://validator.w3.org/ which is great for checking that you have everything, closed all your tags etc. This should get you going and ready to explore the maddening world of HTML and CSS : )
Thanks very much for your help, reps given Didn't expect such a lengthy response! I realise there is lots wrong with the code though. I have made a few changes to the site (hopefully they are okay). Also I wasn't sure what you meant about the macho guy being one huge td. Basically I had to set it as a background image in CSS because otherwise if someone had a lower resolution or resized the window, the macho image was forced to the bottom of the page... So I just decided I would set it as a background image instead. That is why I had to use the multiple <p> </p>'s to try and get the text in the right column to appear in the correct position. Hope you understand what I mean Thanks for the help
He wouldn't have been pushed down if everyone was wrapped in some big container with a set width (which would force a scrollbar). You probably had "float drop" where the browser (usually IE6 though not the only one) thinks there's not enough room for two floats to stay next to each other and drops one. I see you have a mixture of floats and a table. If you want, (and if I get the time... I'm verturing into my first foray into Javascript and I need to ask Crusty Old Guy some questions), I could do a wire-frame version of your site, how I would code it (meaning the big sections are coded, positioned, and have some colours or something so you can tell who is what) and post it here. I think possibly your set-up is most complicated than it needs to be... but I didn't go through the site. If every page is pretty much the same, no problem. Looks like a main content and a sidebar with Macho guy in it. Oh, and you've removed the doctype completely... that's not good either : ) You just needed to change it from XHTML1.1 to either XHTML1.0 or HTML4.01 (I'll write my version in XHTML1.0 Strict since the tag endings would stay XHTML).
Okay, here's the html: http://stommepoes.nl/Adam/adam.html CSS: http://stommepoes.nl/Adam/adam.css XHTML 1.0 strict, valid, CSS also valid. I redid some of the images cause for instance, I dunno if you saw but in my FF the menu was poking way out of the blue box, and the cartoony letters were all nasty jpg-noisy with compression artifacts. I also wanted the name of the page to be seen even without images (for bots and other blind visitors). So I cut out the name and used it as a cover over the <h1> which is "Adam Sinicki.com". The image is sitting in a span sitting within the h1; this is a neat trick I learned here from deathshadow but can be found in more detail here: http://www.mezzoblue.com/tests/revised-image-replacement/ scroll down to the bottom for the better ones. I put your span menu into an unordered list, cause semantically, a menu is a list of links. Now, my husband has on his site a bunch of a's in a span and I don't say anything to him because making that type of menu into a list is both more HTML code and more CSS but whatthehell... The border around adam-with-muscles is blue in my version... this is because in the code I found that the image border was set to that colour and also the border-width was 1.5px. There is no half a pixel, you must have whole pixels. On the current page the border looks black so, I dunno which one you want. The page set-up is a little weird cause you've really got two sidebars right next to each other. So, what I did what this: Around the whole page except footer is a #container with a width of 1000px (the width of the site). Inside is the header with name, menu, and Gentleman text (I made that text too, no need to be in an image). Then I have a #wrapper div, width 100% and floated left. This is another trick I learned from Dan Schulz and deathshadow. The #wrapper is now 100% of the parent's width (the parent is the #container, so it's 1000px). Setting the #wrapper to 1000px doesn't let the trick work. Inside the #wrapper is #main and #sidebar1. Sidebar1 comes first before the text so I can float it right, and I figured that most people visiting, after reading the main content one time, will later want to skip to the newer articles, so in the HTML source first comes the #sidebar1, then the #menu text. P's inside the #menu have the same margin as you had (p class="front" was removed cause every p had it) to make room for the floated right sidebar. I put the attributes-list-thingie into a definition list, cause it kinda is. The name: whatever part. Dl's are great for this sort of thing. dt's are floated left to make the dt's and dd's line up. bottom padding on the dt and dd class of "bottom" styles them with the same space breaks that were there. After closing all those divs, I have #sidebar2 with the featured articles thingie. It is last in the source... I dunno what that part's going to be like, but I assumed it's really links and short descriptions, so I made it last in the source. Now, the #wrapper trick: I floated #sidebar2 left, and then gave it a larger negative left margin than its width. This means its width is less that zero and can "sit" over the #wrapper on the right side. The #wrapper is 100% width so you can't fit anything... but the #sidebar2 now has no width, hehe. Neat trick. Lastly comes the footer. It just does footer stuff, plus clears the floats above. If the arrangement of source order need to be changed, the setup would be different in the CSS. The source order only matters for two reasons: people using screen readers to listen to the page don't want to hear all the BS before the meat, and sometimes if a menu or a sidebar with the same stuff is really long, it's a long listen. Plus, bots like Googlie bots sometimes don't index a whole page before they leave. Supposedly they'll always get the stuff nearer the top-- so sit the BS at the bottom. One bad thing about this page is that the width is set at 1000px. That's a lot of scrolling for smaller resolutions. I didn't have room to squish everything smaller, so I left it where it was. I tried to reduce the height of the background image... but that textured background at only a few pixels made funny marks and lines as it repeated down the page. Images can be copied from here: http://stommepoes.nl/Adam/ The background one with the blue is the only one I didn't touch so it doesn't need to be downloaded anew. In the HTML and CSS I have my own local paths to the images... you'll have to add back the /images/ part to everything. I made a few spelling corrections cause I could. I removed the ’ stuff because it's not XML allowed plus it doesn't need to be escaped anyway. ' shows up fine. I changed everything else to the 4 XML-allowed character entities and the rest are unicode/ascii (© became & # 169 ; without spaces). If we're gonna call it XHTML we might as well pretend that some day in the future it might change into an XML document : ) Same goes for script commenting below. I also changed the email address sitting in the text. That's because having the word "line" with a mailto: anchor makes people's mail programmes open. Which sucks for people like me who do not use their mail programmes-- I use online email like gmail, msn.com, hotmail, yahoo mail, lycos mail, etc. So, I made the email address see-able for those who'd rather copy-paste into their own web mail (I know hovering over the link shows the email address, but you'd be surprised who doesn't know that). I also changed the commenting out of the Javascript... cause there's like a special way to do it for XHTML and a certain way to do it for 100-year-old browsers and a special way to do it so the Javascript doesn't throw an error... so lots of extra commenting : ) I tested the JS, seems to keep working like it should. So, CDATA is commented out. Again, we're pretending this will ever be parsed by an XML parser which it really won't... Uh... I think that's it... Oh wait, I also made a real favocon for the little red flower thingie that shows in the address bar. I dunno how you got it to show in my browser with nothing in the HTML, but I added it, and the favicon is also in the Adam folder. So long as it sits in either the root folder of the server OR the same folder as the html/css, it will show in all browsers. It's a real favicon.ico, converted using a Gimp tool. I didn't look at any of the other pages, only the main page. Good Luck.