|
CSS - Problem With Page When Js Disabled
Hi I have a page I am putting together and everything is fine until I take off js in ff. Then I get this small gap between the code thats would have gotten replaced by flash if js was enabled. Its right below the menu. If you could take a look at http://www.bostonredhat.com/menu.php with js enabled and with it disabled for me and let me know if you see any problems I am missing I would appreciate it.
Thanks. Similar TutorialsHi folks. I am in the process of creating a feature in our Web application to allow users to create and manage a set of simple HTML email templates. At the bottom of my editor screen I show a preview of the formatted email (with the text and HTML entered into a textarea field). My problem is that when I output the preview to the Web page, it inherits all the styles from the parent page (for example an <h1> header has colors and special spacing, etc.). Is there a way to temporarily disable then re-enable the CSS styles defined in the header of the page so I can draw the "preview" with default browser CSS styles which will reflect more what an eMail program would look like? I am not sure if this can be done. If it could, it would be awesome and save me from having to code a special preview page or iFrame for the email template. Ok, don't blame me if this looks like a bad idea as it's not my code. I just have to make it work. Our navigation is basically a div that has a background which is three times the height of that div (and the background file contains different versions of each button or so I am told). Our code is below. We want to have a div behind the menu that will obviously show up if images are disabled but I can't get it working. Presumably because the nav div uses a background file and is not actually filled. Code: PHP Code: <div id="mainmenuText">text links to go below...</div> <div id="mainmenu"> <ul id="mainmenulist"> <li id="menu_homepage"><a href="index.php" title="Homepage" name="Homepage">Homepage</a></li> <li id="menu_apartments"><a href="apartments.php" title="Apartments" name="Apartments">Apartments</a></li> <li id="menu_villas"><a href="villas.php" title="Villas" name="Villas">Villas</a></li> <li id="menu_prices"><a href="prices.php" title="Price Matrix" name="Price Matrix">Price Matrix</a></li> <li id="menu_contact"><a href="contact.php" title="Contact Us" name="Contact Us">Contact Us</a></li> </ul> </div> CSS: PHP Code: #mainmenu { z-index:1000; height: 20px; background: transparent url("../images/layout/navigation.jpg") no-repeat top left; margin-left: 0px; } #mainmenuText { z-index:10; width:100%; height:100%; position:relative; top:10px; display:block; margin-left: 0px; } I am using a CSS with my forms, including setting the color and text font for the <INPUT> buttons. However, if the button is disabled, the colors revert to system default. I've tried but can't seem to set the color if the button is disabled. Is it even possible? Thanks, Is there a way to detect if the browser have disabled CSS? That way, I can redirect users to another page explaining that website won't function with his/her browser with disabled CSS. This is a small thing, but it's kind of annoying. I'm using CSS to make some buttons on my site purty. And they are purty. The problem comes in when I set a buttons state to "disabled". IE o' so nicely makes the button "grayed out". Mozilla browsers do squat. Observe he http://www.drcwbt.com/codetests/disabledbutton.htm I was hoping I might be able to skirt around this problem with the pseudo class ":disabled" but it appears that this is too new still and nobody supports it. Any ideas on how to "gray out" in Mozilla? Hey - So I have a page with a disabled multiple select box, which is automatically populated with the relevant selected value. In Firefox, you can still see the value that's been automatically selected even though it's disabled. But in IE, you can't. Is there a way to make IE show that? Thanks in advance. This was bugging me for a while last week, devshed and google weren't helping much so I wrote my own. Basically if you're trying to get a Javascript enabled site to degrade then instead of writing a clumsy function to walk the DOM and "activate" your funky UI elements just document.write a CSS style block. Mind numbingly simple... and it works: Link: http://www.cyclomedia.co.uk/?40 Code: Code: <head>
<link rel="stylesheet" type="text/css" href="javascript_disabled.css">
<script type="text/javscript">
if( document.getElementById )
document.write('<' + 'link rel="stylesheet" type="text/css" href="javascript_enabled.css">');
</script>
</head>
www.cyclomedia.co.uk - ASP, CSS and AJAX demos, examples and tutorials with free source code download I've searched and searched with no luck. Does anyone know if it is possible to set a style that would set all my disabled textboxs to a grey bg color, back to white on enabling. I know I can perform it through javascript. I'm just trying to do as much with styles as possible here. If someone could point me in the right direction I'd appreciate it. I only need it to work in IE6. Thanks Hi, if i test my website with javascript disabled i don't see any colors or styles(it automatically disables css too). i don't know if its normal or not?? i din't disable css rather i disabled javascript only. all suggestions and recommendations are most welcome. Not sure if this is an HTML or CSS related question but here goes... googling gives me nothing. I have a form that I've built and on occasion one or two of the text fields may have text in side them but I've sent the text field to 'disabled' so that the user cannot change the information inside. The problem is is that some of my users are a little bit older and have a hard time seeing what is inside of the disabled text field because its already grayed out and the text inside is gray. Does anyone know if there is a way to change this or is it just a default with internet explorer? Thanks! When a Text Input is disabled, is there a way to control the visual characteristics such that it's not as subdued, or use different colors for the text / background? hi im using a CSS drop down menu, when my browser is refreshed it becomes disabled/stopsworking. im using IE browser. i got the css drop down list script from the web. can someone help me please! Hi friends, I'm trying to center this page with CSS, but no idea where my code is wrong? in screen resolution 800 it looks fine but in 1024 and above it remains on left side of the page. Here is a page url http://gooo.ueuo.com/ and CSS code is given below. Code:
<style type="text/css">
#container{
margin-left: auto;
margin-right: auto;
}
#logo {
position:absolute;
left:-1px;
top:-2px;
width:200px;
height:60px;
background-color: #003399;
}
#description {
position:absolute;
left:19px;
top:140px;
width:760px;
height:530px;
z-index:1;
}
#Layer5 {
position:absolute;
left:243px;
top:151px;
width:395px;
height:45px;
z-index:4;
}
.style2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #990066;
font-size: 18px;
}
#paragraph {
position:absolute;
left:243px;
top:206px;
width:397px;
height:200px;
}
.style3 {font-family:Verdana, sans-serif;
font-size: 11px;
color:#000000;
line-height: 18px;
padding: 6px;
}
#system {
position:absolute;
left:29px;
top:379px;
width:200px;
height:80px;
z-index:5;
}
.style4 {
font-family: Verdana, sans-serif;
font-size: 12px;
}
.style5 {font-size: 10px;}
.style6 {font-size: 10px;}
#footer {position:absolute;
left:0px;
top:680px;
width:799px;
height:175px;
background-color:#0D75D2;
}
.style7 {
font-family: Verdana, sans-serif;
font-size: 10px;
list-style-type: none;
}
.style9 {
font-family: Verdana, sans-serif;
font-size: 11px;
}
.style10 {
font-weight: bold;
font-size: 14px;
font-family: Verdana, sans-serif;
color: #990066;
}
</style>
Hi All, I think the following is a css problem that I have tried to solve but without success and cause a markup validation error that I can't get rid of. Here you can see the original problem simonedegan.net/index_III.html which I tried to correct (see he simonedegan.net) but when I go to validate the code I have the following errors: Line 92, Column 24: ID "flashcontent" already defined. <div class="style4" id="flashcontent">This SlideShowPro photo gallery requires t Line 88, Column 24: ID "flashcontent" first defined here. <div class="style3" id="flashcontent"> Originally I changed the padding from 15px to 200px to allow a proper alignment of the words in the parent pages (e.g. simonedegan.net/news.html). If it is the case how can I create a 'rule' with the padding of 15px on the left only for the main page where the flash instance is (i.e. simonedegan.net) without affecting the parent pages? Many thanks for helping P.S.: my apologies to the moderator for the links. I did not know how to post the questions without URLs so I removed the initial http://. Again my apologies. I am trying to center the blocks into the middle of the page but all the traditional methods seem to be failing. I've tried centering the body, making a wrapper and aligning and many other methods but the page still clings to the left of the page. If anyone could give help it would be appreciated. It probably requires the most simple of solutions but, as a relatively new user of CSS, even these seem to be hard to discover... CSS Code Code:
/* Usual Selectors */
div.wrapper {
margin-left: auto;
margin-right: auto;
height: 100%;
text-align: center;
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #FFFFFF;
background-color: #000000;
text-align: center;
}
p {
width: 100%;
text-align: left;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
border-bottom: 1px solid #E0E0E0;
}
/************************* Identification *************************/
#header {
position: absolute;
width: 950px;
height: 46px;
margin: 0;
margin-top: 50px;
padding: 0 0 50px 0px; /*top right bottom left*/
text-align: left;
}
#footer {
width: 950px;
text-align: center;
}
#t_navigation {
position: absolute;
z-index: 10;
width: 50%;
height: 50px;
margin: 0;
margin-top: 68px;
padding: 0 0 50px 250px; /*top right bottom left*/
font-weight: normal;
text-align: left;
}
#search_frame {
position: absolute;
z-index: 10;
margin: 0;
margin-top: 35px;
padding: 0 0 0 250px; /*top right bottom left*/
width: 740px;
text-align: left;
}
#search_box {
background-color: #FFFFFF;
height: 28px;
text-align: left;
}
#search_box #s {
float: left;
padding: 0;
margin: 6px 0 0 6px;
border: 0;
background-color: #FFFFFF;
font-color: #000000;
width: 70%;
text-align: left;
}
#search_box #go {
float: right;
margin: 3px 4px 0 0;
font-color: #000000;
text-align: left;
}
#l_navigation {
position: absolute;
z-index: 10;
width: 210px;
height: 600px;
margin: 0;
margin-top: 100px;
padding: 0 0 50px 0px; /*top right bottom left*/
border-right: 1px solid #E0E0E0;
font-weight: normal;
text-align: left;
}
#centerDoc {
position: absolute;
z-index: 15;
padding: 0 0 50px 250px; /*top right bottom left*/
margin-top: 100px;
margin-right: 10%;
text-align: left;
width: 740px;
}
Thanks. Hello, Is there a way to stop an expanding page at a certain width? But yet keep the expanding feature? Right now as you can see from the below website that I am working on the page contracts and the images of course stay at there minimum width but the rest of the page keeps contracting...I don't like it doing that. Any ideas? web.bpro.com/agagency/index.htm Hi, I'm having a problem with Firefox and a print-friendly stylesheet. Basically, I'm printing out a load of images - 9 per page, in 3 rows of 3. After 9 images, I'm printing a <div style="page-break-after:always;"></div> However, the problem I'm getting is that the 10th image, which appears at the top left of the next page, is missing. All of the other images on the page print, apart from that one. Has anyone else had the same problem, and is there a way around it. Other threads I've Googled suggest it's a bug in CSS2, but my boss/client won't accept that as an answer! Thanks in advance, Psycle I am building a new page and I'm having problem having this space on top of it. here's the situation. All Divs are inside a Parent Div called Container. This div has the following qualities: body { margin-top: 0; padding-top: 0; background-image: url(images/bg.gif); background-repeat: repeat-x; background-attachment: fixed; background-color:#003366; font-family:Arial, Helvetica, sans-serif; } #container { position:relative; width:1000px; height: 1250px; top: 0; margin-left: auto; margin-right: auto; margin-top: 0; border: 1px black solid; z-index: 3; } If I remove the container Div and just have the child Divs then the space on top disappears and the page goes to the top, however it gets aligned to the left. As you can imagine what I want is the page both centered and on top, so I'm pretty much working with the files that have the container, so that's why I'm trying to fix either I'm assuming there is an issue with the CSS of the menu, because it's the only rare addition apart from the normal CSS. If I do in the main parent container position:absolute instead of relative. it then goes to the top, but it's not centered. I've been working on this all day long but can't figure out a solution, if you can please help me out. well i have totally redesigned my orginal page due to problems with IE browser-- i am now using a two column template and have copied code exactly-- had both XHTML and CSS verified with the W3C validator and they both check out to be ok-- the page is NOT showing up properly at all-- i am using FIREFOX as browser and i am wondering if i have now traded one problem for another i would sure appreciate it if someone would just go and look at page to see if it shows up right in another browser- THE PAGE also here is the url for the CSS CODE here is link to how page is supposed to look-- CORRECT VIEW if the page is not right in FOX does anyone know a work around to make it right?????? UGH UGH THIS IS SO FRUSTRATING thanks in advance-- Hi guys, I have a problem that really bugs me and I'm probably not seeing the super-easy simple solution that is certainly there. s369533597(dot)onlinehome(dot)us s369533597(dot)onlinehome(dot)us(slash)templates(slash)edison(slash)css(slash)template(dot)css and art.sheet is the tag. (site build on joomla 1.6) If your browser window will show more than 900px in height you'll see immediately my problem. the "body content" area will resize to the window height and not to the amount of content in it leaving a lot of blank space depending on the browser window height. I've tried all the min-height and height options and combinations but nothing really works. If I'll set up a particular height for that tag it will be OK for the home page but on any other page the overflow look awful. I just can't make it fluid. any advise? |
|||||||