Jump to content

elementalgrace

Members
  • Posts

    146
  • Joined

  • Last visited

Profile Information

  • Gender
    Male
  • Location
    Oxfordshire, UK

elementalgrace's Achievements

Member

Member (2/7)

0

Reputation

  1. Hello again.I'm just wondering if anyone knows what an ie5.5 friendly alternative to white-space:normal is? I know IE 5.5 picks up white-space:nowrap but it doesn't seem to pick up white-space:normal and it's playing merry ###### with my tables & data grids (which work in every other browser in creation)...
  2. Thanks - I included language="Javascript" to the script tags but nothing seemed to change. I'm trying to use ietester now as well as my standalone and both seem to respond differently but neither are picking up any of the javascript files. Javascript is definitely enabled.
  3. I'm sorry, I'm still confused. I want to use the visibility:hidden in the CSS so my HTML is something like <a class="hidden" id="special2"> and then my javascript snippet goes like this: (??) function show_links () { document.getElementById("special2").style.visibility = "visible"; }window.onload = show_links; // NO PARENTHESES Could I do it with a class instead of IDs?Thanks for your help ... I find javascript utterly muddling so apologies if I come off as a bit of an idiot.
  4. I'm looking for some javascript that will hide two links unless javascript is enabled. I've looked on google but most of what I'm finding seems to relate to accordian panels Any tips?
  5. Hi,I've been creating some layouts using jquery and other javascript snippets, and have been testing them for cross browser compatibility. I can get them all looking and working the same in IE6, IE7, Firefox 3, Opera 9.6 and Safari (Win 3.1) but I also need the site to work with IE 5.5 (yes, I know nobody should still be using it because it's virtually out of the ark but some people who will be using the site do and so...). To test the page, I set up a Microsoft virtual machine and downloaded standalone versions of IE 5.5 from evolt.org but they don't seem to be applying any of the javascript effects. I tested whether it was the standalone browser or the page by opening up a javascript demo that I knew worked and it didn't load.It seems to be able to recognise javascript though as I have a HTC file included to account for background transparencies in PNG files and it applies this without a hitch, which struck me as a bit weird.The javascipt is only stylistic so it's not the end of the world but I do want them to work if possible. So if anyone has come across this problem or (god forbid) has a working copy of IE 5.5 and would be willing to test for me, I'd be eternally grateful.Thanks
  6. **EDIT - just reread your post.Span is inline style. Try adding: span#nospace{display:block;} to your CSS and see what happens. Although, that is a quick workaround. You'd be better off finding out what's happening to your top H1 tag and styling that properly.
  7. I seem to be having limited luck with the text-alignment. I think you might be right and I'll have to stick with classes for each cell in the column. What a shame.
  8. Hello,I am trying to set out some styles for a table (for displaying tabular data) and want to have certain columns aligned to the left or the right i.e. I want columns that deal with cost to be displayed right-aligned as they should be and the remainder to be left aligned. I thought I could get this to work with the entire column by styling the col declaration rather than having to apply a class to every individual table cell in that column. Does anyone know if this would be possible or if there are any tutorials that cover this?Thanks in advance.
  9. Pretty much what I was going to say if you want to do it without javascript. There are different varions on this theme that he demonstrates and the code all does work really well.If you don't mind using javascript, you could try http://www.stunicholls.com/menu/pro_dropdown_2.html
  10. Hi,I am having an issue in (surprise surprise) Internet Explorer 6 and was hoping someone could give me any ideas as to why this is happening.I have a CSS only dropdown menu, which is a modified version of one used on CSS play. When used as it is supposed to be (as a dropdown menu) there are no problems. The problem occurs when I have to do something a bit odd with it. In the submenu, I need to incorporate a form. I have it so that each of the label/form elements are set within each li and in all the modern browsers it works fine but in IE6 if you hover over the label the entire submenu disappears! I can't for the life of me work out why this would be.I only have the code locally so I can't post a link to it (sorry) but it is below:HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0pr1/build/cssreset/reset-min.css" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0pr1/build/cssfonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0pr1/build/cssgrids/grids-min.css" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0pr1/build/cssbase/base-min.css" /><link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" /><!--[if lte IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie.css" /><![endif]--><title>XXXXXXXXXXX</title><meta http-equiv="Content-language" content="en-gb" /> </head><body><div id="all"><!--HEADER--><div id="header"><!--MENU--><div class="multi-level" style="margin-right:20px;"><ul class="menu"> <li class="top "><a href="" id="Account" class="top_link" title="ACC">ACC<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><span class="title">XXXX</span></li> <li><a href="">YYYY</a></li> <li><a href="">ZZZZ</a></li> <li><a href="">VVVV</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="" id="Admin" class="top_link"><span>Admin</span><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><span class="title">Admin</span></li> <li><a href="">AAAA</a></li> <li><a href="">BBBB</a></li> <li><a href="">CCCC</a></li> <li><a href="">DDDD</a></li> <li><a href="">EEEE</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="" id="Help" class="top_link"><span>Help</span><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><span class="title">FFFF</span></li> <li><a href="">GGGG</a></li> <li><a href="">HHHH</a></li> <li><a href="">JJJJ</a></li> <li><a href="">KKKK</a></li> <li><a href="">LLLL</a></li> <li><a href="">MMMM</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="" id="LogOut" class="top_link" alt="Log Out" title="Log Out"><span>Log Out</span></a></li></ul></div><!--END: MENU--><!--FORM--><div class="multi-level" style="float:left; margin-left:10px;"><ul class="menu"> <li class="top "><a href="" id="ctl00" href="setfilters.aspx" class="top_link" title="Form">Form<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><span class="title">Form</span></li><li><span class="data"><label for="ctl00__cpanel_ddlTier1" id="ctl00__cpanel_lblTier1">Label 1</label><select name="ctl00$_cpanel$ddlTier1" id="ctl00__cpanel_ddlTier1"><option value=""></option></select></span></li><li><span class="data"><label for="ctl00__cpanel_ddlTier2" id="ctl00__cpanel_lblTier2">Label 2</label><select name="ctl00$_cpanel$ddlTier2" id="ctl00__cpanel_ddlTier2"><option value=""></option></select></span></li><li><span class="data"><label for="ctl00__cpanel_ddlTier3" id="ctl00__cpanel_lblTier3">Label 3</label><select name="ctl00$_cpanel$ddlTier3" id="ctl00__cpanel_ddlTier3"><option value=""></option></select></span></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul></div><!--END: FORM--></div><!--CONTENT--><div class="content-mid"><div class="content-top"></div><div id="content"><h1>Lorem Ipsum Sit dolor amet</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu arcu, eleifend sit amet, accumsan a, laoreet sed, nunc. Aliquam eleifend pede eu metus. Nunc mattis, nisi eu tincidunt pretium, nibh erat ultrices nibh, eget malesuada nisi turpis et eros. Etiam augue nisl; pharetra vitae, consectetuer ornare; pellentesque sit amet, odio. Aenean sed massa eu sem vestibulum bibendum? <a href="#">Praesent id nulla eu magna tincidunt ullamcorper</a>. In consequat neque eu nibh. Nunc dapibus molestie odio. Sed in libero. Etiam arcu eros, vehicula ut, lobortis at, tincidunt non, libero. Nullam pede lacus, pretium ac, mollis ut, eleifend sit amet, quam. Nam sit amet dolor. Morbi eleifend volutpat arcu. In sit amet mauris. Nulla vel sapien id magna tempus malesuada. Fusce fermentum lectus imperdiet mauris. Fusce dolor orci, lobortis non, lobortis nec, tempor eu; velit. Suspendisse viverra augue eget dui.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu arcu, eleifend sit amet, accumsan a, laoreet sed, nunc. Aliquam eleifend pede eu metus. Nunc mattis, nisi eu tincidunt pretium, nibh erat ultrices nibh, eget malesuada nisi turpis et eros. Etiam augue nisl; pharetra vitae, consectetuer ornare; pellentesque sit amet, odio. Aenean sed massa eu sem vestibulum bibendum? Praesent id nulla eu magna tincidunt ullamcorper. In consequat neque eu nibh. Nunc dapibus molestie odio. Sed in libero. Etiam arcu eros, vehicula ut, lobortis at, tincidunt non, libero. Nullam pede lacus, pretium ac, mollis ut, eleifend sit amet, quam. Nam sit amet dolor. Morbi eleifend volutpat arcu. In sit amet mauris. Nulla vel sapien id magna tempus malesuada. Fusce fermentum lectus imperdiet mauris. Fusce dolor orci, lobortis non, lobortis nec, tempor eu; velit. Suspendisse viverra augue eget dui.</p></div><!--FOOTER--><div id="footer"><div class="left">Segala Certified<br />Copyright 2008. All rights reserved.</div><div class="right"><br /><a href="#">T & Cs</a> :: <a href="#">Accessibility</a> :: <a href="#">Privacy</a></p></div><div class="clear"></div></div><!--END: FOOTER--><div class="content-bottom"></div></div></div></body></html> CSS: body {margin:0; padding:0; color:#003e7e; font-family:Arial, Sans-Serif;}/*ALL*/#all{width:990px; background-color:#fff; margin:auto; }h1{font-size:125%;}h2{}h3{}h4{}p{line-height:140%; font: small arial, sans-serif; }a{color:#505050; }a:hover{color:#888; text-decoration:none;}/*HEADER, NAV & SELECT DATA*/#header{background: #fff url(../images/header.png) no-repeat; position:relative; width:990px; height:130px;}/*MENU*/.multi-level {height:2em; position:relative; z-index:100; float:right; margin-top:95px; }.menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif; }.menu li.top {display:block; float:left; position:relative; font-size:small; }.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}.menu th, .menu td{border:0;}.menu li.top a.top_link {display:block; float:left; color:#fff; margin: 0 10px 0 15px; height:40px; }.menu li a{text-decoration:none;}.menu a:hover {visibility:visible;} /* for IE6 */.menu li:hover { position:relative; z-index:200;} /* for IE7 */.menu ul, .menu :hover ul ul, .menu :hover ul :hover ul ul,.menu :hover ul :hover ul :hover ul ul,.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}.menu :hover ul.sub {left:-5px; top:20px; background: #fff; padding:2px 2px 0 2px; border:1px solid #e4e4e4; width:165px; height:auto;}.menu :hover ul.sub li {display:block; height:5%; position:relative; float:left; width:159px; border-bottom:2px solid #fff;text-align:left;}.menu :hover ul.sub li span.title {display:block; font-size:small; height:5%;width:159px; height:5%; color:#fff; background:#6385ac url(../images/menutitle_bg.png) repeat-x bottom left; padding:3px; text-decoration:none; }.menu :hover ul.sub li span.data {display:block; font-size:small; height:5%;width:159px; height:5%; color:#003e7e; background: #dde5ee url(../images/menu_bg.png) repeat-x bottom left; padding:3px; text-decoration:none; }.menu :hover ul.sub li a {display:block; font-size:small; height:5%;width:159px; height:5%; color:#003e7e; background: #dde5ee url(../images/menu_bg.png) repeat-x bottom left; padding:3px; text-decoration:none; }.menu :hover ul.sub li span.selectdata {display:block; font-size:small; width:159px; height:5%; color:#003e7e; background: #dde5ee url(../images/menu_bg.png) repeat-x bottom left; padding:3px; text-decoration:none; }.menu :hover ul.sub li a:hover {background:#aec1cc; color:#000;}/*SELECT DATA*/.menu :hover ul.sub li label{display:block;}#ctl00_cpanel input, #ctl00_cpanel select{width:95%;}.cp_month, .cp_year{width:49.5%; float:left;}.multi-level label{font-weight:normal; font-size:small; color:#000066; float:left; padding-left:5px;}.multi-level input, .selectdata select{font-size:small; color:#000066; border:1px solid #000066;}#ctl00__cpanel_cp_row_tier1, #ctl00__cpanel_pnlFunction, #ctl00__cpanel_pnlCostCentre, #ctl00__cpanel_pnlMonthYear, .cp_year, #cp_row_recs{padding-bottom:5px;}.multi-level .button{background:#6385ac url(../images/menutitle_bg.png) repeat-x bottom left; color:#fff; font-size:small; border:1px solid white;}/*CONTENT*/.content-top{background: url(../images/content-top.png) no-repeat !important; width:990px; height:14px; margin:0; padding:0; }.content-mid{background: #fff url(../images/content-mid.png) repeat-y; width:990px; }.content-bottom{background: #fff url(../images/content-bottom.png) no-repeat !important; width:990px; height:26px;}#content{min-height:300px; width:940px; border: 1px solid #fff; margin:auto; }/*FOOTER*/#footer{background: #fff url(../images/footer.png) no-repeat; width:959px;margin:auto;margin-left:14px; padding-top:35px; font: x-small arial, sans-serif; }#footer .left{color:#505050; padding:0; margin:0; width:48%; float:left; padding-left:10px;text-align:left;}#footer .right{padding:0; margin:0;width:48%; float:right; text-align:right; padding-right:10px;}#footer a{color:#505050; text-decoration:underline;}#footer a:hover{text-decoration:none;}/*TABLES*//*FORMS*//*MISC*/.clear{clear:both; height:1px;}
  11. Yeah, that's pretty much the basis of the problem. The accessibility guys want it to work the same (as much as possible) with the JS turned off. I don't really know anyone that turns it off these days but since the site needs to pass ... *shrug*Hmm, if it appeared with a scrollbar when JS was turned off, that might actually work. There's a huge amount of text to be fed through this "marquee" area with very little page space hence the reason it needs to scroll in some way. That sounds like quite a viable alternative though. Thanks.
  12. Try googling for Create Dreamweaver Template or something similar. The first one I clicked on came up with this tutorial, which should do the trick; http://www.tutorialized.com/tutorial/Creat...eamweaver/25133
  13. Well, it does well for the high contrast accessibility stuff, which is something in its favour. I can't admit to being a great fan but then I find it very difficult to read off a white background when I'm reading on-screen as opposed to reading on-page. It's all something to do with light ... I found an article on it a while ago but I can't find it now. Was a very interesting read though.
  14. Look, normally I'd not touch marquee tags or anything like them with a barge pole. I have the same views on the dratted things but the developer I am working with is insisting on using them because his client insists that they want it (lots of information to impart but no space as they won't allow the page to scroll vertically(!) which leaves us very restricted in terms of alternatives. I was hoping there would be an alternative involving simple markup as neither javascript or flash is accessible and won't pass our accessibility audit but if it's not to be then it's not. Thanks for your help.
×
×
  • Create New...