thintin

Hi. I've been developing my site for a few months and its getting pretty near where I want it to be. I'm currently converting pages from my old design to a new one, including a new external CSS. One page, which is heavy with javascript, is giving me problems because it won't display as it should when viewed in Firefox. IE works out the corrrect layout but I am aware that IE is good at overlooking bad coding an delivering what it thinks the coder intended; whereas firefox is a bit more strict with its compliance. The page in question is here If you view in IE you'll see that the recent blog entries div (div id=blog) should be below the expanding div (div id=below_thisText2), but in firefox it gets shoved to the top of the right-floated container that holds the navigation, promo and links. can anyone tell me why please? Here is the external style sheet: .style1 { font-size: small; } .style5 {font-size: 10px} .style6 { color: #C49248 } body { font-family: Verdana, Geneva, Arial, helvetica, sans-serif; background-color: #000000; color: #CAAB4E; text-decoration: none; } a:link { color: #C49248; text-decoration: none; } a:visited { color: #896D2A; text-decoration: none; } a:hover { color: #FAF4E9; text-decoration: none; } a:active { color: #C49248; text-decoration: none; } #main_container { width: 820px; margin-right: auto; margin-left: auto; background-image: url(portal/assets/images/container_background_800_wide.gif); background-repeat: no-repeat; margin-top: 20px; } #main_container_home { width: 820px; margin-right: auto; margin-left: auto; height: 950px; } #main_container_links { height: 950px; width: 820px; margin-right: auto; margin-left: auto; } #main_container #right_container { height: auto; width: 200px; float: right; } #main_container #right_container #nav { height: 220px; width: 140px; font-family: Georgia, "Times New Roman", Times, serif; font-size: large; background-image: url(portal/assets/images/nav_background/nav_background.png); background-repeat: no-repeat; padding-top: 40px; padding-right: 30px; padding-bottom: 40px; padding-left: 30px; text-decoration: none; color: #FFFFCC; } #main_container #right_container #nav a:link { color: #FFFFCC; } #main_container #right_container #nav a:hover { color: #C49248; } #main_container #right_container #nav a:visited { color: #FFFFCC; } #main_container #right_container #promo { height: 270px; width: 180px; padding: 10px; } #main_container #right_container #links { height: 350px; width: 100%; font-size: small; text-align: center; } #main_container #left_container { width: 590px; float: left; padding: 5px; } #main_container #left_container #content_home { height: 740px; width: 590px; background-image: url(portal/assets/images/content_backgrounds/content_home_home%20copy.png); background-repeat: no-repeat; } #main_container #left_container #content_links { height: 740px; width: 590px; background-image: url(portal/assets/images/content_backgrounds/content_links_links%20copy.png); background-repeat: no-repeat; color: #000000; font-family: "Courier New", Courier, monospace; } #main_container #left_container #content_about { height: auto; width: 590px; background-image: url(portal/assets/images/content_backgrounds/content_about_aboutme%20copy.png); background-repeat: no-repeat; color: #000000; font-family: "Courier New", Courier, monospace; } #main_container #left_container #content_links #upper_links #links_research { float: left; width: 250px; padding-left: 30px; padding-top: 30px; padding-right: 15px; padding-bottom: 15px; color: #000000; } #left_container a:link { font-size: small; color: #000000; text-decoration: none; } #left_container a:active { font-size: small; color: #333333; text-decoration: none; } #left_container a:visited { font-size: small; color: #333333; text-decoration: none; } #left_container a:hover { font-size: small; color: #CC9933; text-decoration: none; } #main_container #left_container #content_links #upper_links #links_Recommendations { float: right; width: 250px; padding-top: 30px; padding-right: 15px; padding-bottom: 15px; padding-left: 30px; color: #000000; } #main_container #left_container #main_site_title { background-image: url(portal/assets/images/main_title.gif); background-repeat: no-repeat; height: 200px; width: 100%; } #main_container #left_container #page_title { height: 100px; width: 100%; text-align: center; vertical-align: middle; } #main_container #left_container #upper_home { height: 200px; width: 90%; font-size: medium; background-repeat: no-repeat; background-position: right bottom; padding: 15px; color: #000000; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 15px; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; text-decoration: none; } #main_container #left_container #upper_links { height: 550px; } #main_container #left_container #content_about #about_top_text { font-size: small; width: 92%; padding-top: 1%; padding-right: 4%; padding-bottom: 1%; padding-left: 4%; height: 230px; } #main_container #left_container #upper_about { height: 180px; } #main_container #left_container #upper_about_left { float: left; width: 46%; padding-top: 1%; padding-right: 3%; padding-bottom: 3%; padding-left: 0%; height: auto; } #main_container #left_container #upper_about_right { float: right; width: 46%; padding-top: 1%; padding-right: 3%; padding-bottom: 3%; padding-left: 0%; height: auto; } #main_container #left_container #lower_home { height: 200px; width: 510px; background-image: url(portal/assets/images/promo/free_sample_promo%20copy.png); background-repeat: no-repeat; background-position: center top; padding-top: 200px; padding-right: 40px; padding-left: 40px; text-align: center; color: #000000; padding-bottom: 0px; } #main_container #left_container #lower_links { height: auto; padding-top: 0px; padding-right: 30px; padding-bottom: 15px; padding-left: 30px; } #main_container #left_container #lower_about { height: auto; width: 92%; text-align: center; padding: 4%; font-size: small; } #main_container #main_container_about #left_container #content_about #above_thisText2 { background-image: url(portal/assets/images/content_backgrounds/scroll_repeat/scroll_top_long.png); height: 47px; width: 600px; margin-top: 20px; } #main_container #main_container_about #left_container #content_about #below_thisText2 { background-image: url(portal/assets/images/content_backgrounds/scroll_repeat/scroll_bottom_long.png); height: 33px; width: 600px; margin-bottom: 20px; } #main_container #main_container_about #left_container #content_about #thisText2_container { color: #000000; font-size: small; background-image: url(portal/assets/images/content_backgrounds/scroll_repeat/scroll_middle_long.png); background-repeat: repeat; height: auto; width: 530px; padding-right: 35px; padding-left: 35px; padding-bottom: 15px; } #main_container #left_container #shouts_container { height: 47px; width: 600px; background-image: url(portal/assets/images/content_backgrounds/scroll_repeat/scroll_top_long.png); background-repeat: no-repeat; } #shouts_left { height: 33px; width: 600px; background-image: url(portal/assets/images/content_backgrounds/scroll_repeat/scroll_bottom_long.png); } #shouts_centre { padding: 5px; height: auto; width: 190px; float: left; } #shouts_right { padding: 5px; height: auto; width: 190px; float: left; } #footer_container { width: 800px; margin-right: auto; margin-left: auto; } #footer { height: 180px; width: 100%; background-image: url(portal/assets/images/new_footer_800_wide.jpg); background-repeat: no-repeat; background-position: bottom; padding-bottom: 20px; } #footer #blog { height: 100%; width: 70%; font-size: small; overflow: hidden; } #textnav { height: 100px; width: 100%; text-align: center; } Thanks for any help ;-) Phil. p.s. I've also attached the CSS seperately. new_portal.css

"Just a warning though, it probably won't" mmm, as a nooby I'm a bit hesitant to add code that may not work (coz I won't know how to fix it), I'll give it a try though...

errrr I'm afraid you're talking to a javascript nooby here. I've never knowingly crawled a DOM or returned an object (unles library books count?) I looked at the page you cited above but I think I must of had my browser set to Swahili coz I didn't understand any of it... Maybe instructions along the lines of: add 'this' to 'here', or maybe 'scrap what you've done and cut and paste this in its place' would be more suitable for my level of skill? Thanks, Phil.

Hi. I'm trying to use some code to hide/unhide divs that occupy the same space on the screen so that the content is selected by clicking a relevant link in another div. it's working, sort of, but I need to add some script to close the last unhidden div when another link is clicked. currently the new unhidden divs appear below the previous ones unless they are re-clicked to close em :-S the page in question is here: http://www.philtinsley.com/about.html (i've just sent the updated pages to the server but if you get 'under construction' writen in the middle of the page, you're seeing the old one) any help very much appreciated :-)

Thanks for the post bf. I have seen a few menu style solutions that use some kind of scripting language but I was really wanting to avoid the need for site visitors to have to either 'allow' or install anything to view the page...maybe this isn't possible but with hidden divs I thought it would be...

I wish to add some usability to my site, to manage my 'updates' page, which is pretty much a mini-blog-diary type thing... what I'm hoping for is some way to dynamically display the blog/diary type entries, one at a time, depending on user interaction. To achieve this I'd like users to first click a particular month name from a list, which will be contained in a fixed DIV (lets call it Month-DIV), this action will then display a list of links to entries , for that chosen month, in another location on the page (called List-DIV). Fianally, when the user hovers over the link to entry, the required entry will be displayed in a third location (Entry-DIV) which would initially be displaying the most recent entry. just to add some description to aid in visualisation, the 3 DIVs would be inside a square container DIV. Month-DIV would be the top left quarter, List-DIV would be the top right quarter, and the Entry-DIV would occupy the bottom half. Hope this makes sense ... I've tried, unsuccessfully, using javascript and hidden DIVs. If at all possible I'd like to find a pure CSS solution. Any help will be very, very gratefully received. The page I'm working on currently shows the list of entries as one long column, and can be viewed here:- http://www.philtinsley.com/updates.html In the finished page I would like the footer to be a bit nearer to the header! Thanks in advance. Thintin.

Thanks guys. I must of been having a bit of a moment when I typed the title of my post because I've no idea where the word 'Coloured' came from (although it does party describe what I want to change). I'm not sure that I made myself clear with my question. The scroll bar which I want to change is in the middle of a table (which I'm using to layout the page) it's not the one on the browser's right or lower side. Have a look at the page in question here http://www.philtinsley.com/about%20PT%20site/me.html The cell with the text in the centre of the page should be fixed width and height with a scroll bar to view the contents on the right. It seems to work in Firefox, Navigator and Opera but not in I.E.! (haven't tried it in Safari yet) What I want is to set the colour of the scroll bar to match the page and remove the one from the bottom if possible? Have a look and see if what you were saying is still true. Thanks.

Hello. I've been busy creating a web site for myself and I was wondering if it was possible to modify the appearance of scroll bars on a table cell which is set to display the overflow via 'scroll' using CSS? Currently the scroll bars take the same appearance as the web browser, not nice at all! Any help appreciated. Thanks, Phil.

The usual introduction post from a newbie...here goes. Who am I? Phil. Why am I here? From a philosophical point of view...I'm still working on it but I'm pretty certain it has something to do with hedgehogs. From a web design point of view, I'm on a steep learning curve with Dreamweaver and need help. Where am I? Shropshire UK How old am I? 35 What do I do for a living? I'm a writer and painter (but the money actually comes from working with disabled people) What is my favourite nerdy joke? There are only 10 types of people in the world, those who can read binary and those who cann't! What is my quest? To seek the Holy Grail Why is this intro going on so long?...

Hi, just saying hello. New to site design and need help, have posted already, hope to make use of this forum on a regular basis. Sorry to be brief, tired, need sleep......

Hi, I'm designing my first website using Dreamweaver and everything was going fine until I decided to add a feedback form... I'm using NMSFormMail to send the contents of a simple feedback form to a dedicated email address. It took some fiddling to get the form working but I finally cracked it. What I now want to do is have the script return the user to the website after the form is submitted rather than plonk a thankyou screen in front of the which has no connection with my web site. How? Any advice gratefully received, thankyou.