CSS - Weird Color Top Part Of Page
www.devwebsites.com
There is a little strip of lightened color on that part and I don't think its from the images at least..I can't for the life of me figure out what is causing it. Thanks Similar TutorialsHi All, I have my site that uses CSS, however at times I want certain parts of it to not use the CSS. Not whole pages, just a section of a page. Is there anyway to remove all CSS formating in a section? So eg: <div style='none'> Some HTML </div> TIA Charlie Dear All, I have a question - Background : I used the E-book "designing without tables" and created a page with 2 columns. A 200 px column on the left for the links and the rest on the right for the data. There is also a header column on the top with has main menu. Question 1 : If there are 5 links on the left column, how can I link the pages such that when I click on a link on the left column..only the right column should refresh. Meaning, I want the left column to be static with the links and only the right column should be refreshed? Is it possible to do so using only CSS and HTML ? Thanks in advance. Regards. hi, I am fairly new to css and working on a website with a complete css layout for the first time, one I got from dreamweaver. I thought things were going great because I did all my testing in Firefox (like a good boy) but then I tried to test it in Internet Explorer 6 and alot if not all of my webpages have the text positioned at the bottom instead of the top of a page. Here is a link: http://www.jcstrategies.com/jeff/featured_listings.php CSS CODE ----------------------------------------------------------- /***********************************************/ /* emx_nav_left.css */ /* Use with template Halo_leftNav.html */ /***********************************************/ /***********************************************/ /* HTML tag styles */ /***********************************************/ body{ font-family: Arial,sans-serif; color: #333333; line-height: 1.166; margin: 0px; padding: 0px; background: #cccccc url(./images/bg_grad.jpg) fixed; } /******* hyperlink and anchor tag styles *******/ a:link, a:visited{ color: #005FA9; text-decoration: none; } a:hover{ text-decoration: underline; } /************** header tag styles **************/ h1{ font: bold 120% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } h2{ font: bold 114% Arial,sans-serif; color: #006699; margin: 0px; padding: 0px; } h3{ font: bold 100% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } h4{ font: 100% Arial,sans-serif; color: #333333; margin: 0px; padding: 0px; } h5{ font: 100% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } /*************** list tag styles ***************/ ul{ list-style-type: square; } ul ul{ list-style-type: disc; } ul ul ul{ list-style-type: none; } /********* form and related tag styles *********/ form { margin: 0; padding: 0; } label{ font: bold 1em Arial,sans-serif; color: #334d55; } input{ font-family: Arial,sans-serif; } /***********************************************/ /* Layout Divs */ /***********************************************/ #pagecell1{ position:absolute; top: 112px; left: 2%; right: 2%; width:95.6%; background-color: #ffffff; } #tl { position:absolute; top: -1px; left: -1px; margin: 0px; padding: 0px; z-index: 100; } #tr { position:absolute; top: -1px; right: -1px; margin: 0px; padding: 0px; z-index: 100; } #masthead{ position: absolute; top: 0px; left: 2%; right: 2%; width:95.6%; } #pageNav{ float: left; width:178px; padding: 0px; background-color: #F5f7f7; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; font: small Verdana,sans-serif; } #content{ padding: 5px 10px 5px 5px; margin:0px 0px 0px 179px; border-left: 1px solid #ccd2d2; } /***********************************************/ /* Component Divs */ /***********************************************/ #siteName{ margin: 0px; padding: 16px 0px 8px 0px; color: #ffffff; font-weight: normal; } /************** utility styles *****************/ #utility{ font: 75% Verdana,sans-serif; position: absolute; top: 16px; right: 0px; color: #919999; } #utility a{ color: #ffffff; } #utility a:hover{ text-decoration: underline; } /************** pageName styles ****************/ #pageName{ padding: 0px 0px 14px 10px; margin: 0px; border-bottom:1px solid #ccd2d2; } #pageName h2{ font: bold 175% Arial,sans-serif; color: #000000; margin:0px; padding: 0px; } #pageName img{ position: absolute; top: 0px; right: 6px; padding: 0px; margin: 0px; } /************* globalNav styles ****************/ #globalNav{ position: relative; width: 100%; min-width: 640px; height: 32px; color: #cccccc; padding: 0px; margin: 0px; background-image: url(./images/glbnav_background.gif); } #globalNav img{ margin-bottom: -4px; } #gnl { position: absolute; top: 0px; left:0px; } #gnr { position: absolute; top: 0px; right:0px; } #globalLink{ position: absolute; top: 6px; height: 22px; min-width: 640px; padding: 0px; margin: 0px; left: 10px; z-index: 100; } a.glink, a.glink:visited{ font-size: small; color: #000000; font-weight: bold; margin: 0px; padding: 2px 5px 4px 5px; border-right: 1px solid #8FB8BC; } a.glink:hover{ background-image: url(./images/glblnav_selected.gif); text-decoration: none; } .skipLinks {display: none;} /************ subglobalNav styles **************/ .subglobalNav{ position: absolute; top: 84px; left: 0px; /*width: 100%;*/ min-width: 640px; height: 20px; padding: 0px 0px 0px 10px; visibility: hidden; color: #ffffff; } .subglobalNav a:link, .subglobalNav a:visited { font-size: 80%; color: #ffffff; } .subglobalNav a:hover{ color: #cccccc; } /*************** search styles *****************/ #search{ position: absolute; top: 5px; right: 10px; z-index: 101; } #search input{ font-size: 70%; margin: 0px 0px 0px 10px; } #search a:link, #search a:visited { font-size: 80%; font-weight: bold; } #search a:hover{ margin: 0px; } /************* breadCrumb styles ***************/ #breadCrumb{ padding: 5px 0px 5px 10px; font: small Verdana,sans-serif; color: #AAAAAA; } #breadCrumb a{ color: #AAAAAA; } #breadCrumb a:hover{ color: #005FA9; text-decoration: underline; } /************** feature styles *****************/ .feature{ padding: 0px 0px 10px 10px; font-size: 80%; min-height: 200px; height: 200px; } html>body .feature {height: auto;} .feature h3{ font: bold 175% Arial,sans-serif; color: #000000; padding: 30px 0px 5px 0px; } .feature img{ float: left; padding: 0px 10px 0px 0px; } /*************** story styles ******************/ .story { padding: 10px 0px 0px 10px; font-size: 80%; } .story h3{ font: bold 125% Arial,sans-serif; color: #000000; } .story p { padding: 0px 0px 10px 0px; } .story a.capsule{ font: bold 1em Arial,sans-serif; color: #005FA9; display:block; padding-bottom: 5px; } .story a.capsule:hover{ text-decoration: underline; } td.storyLeft{ padding-right: 12px; } /************** siteInfo styles ****************/ #siteInfo{ clear: both; border-top: 1px solid #cccccc; font-size: small; color: #cccccc; padding: 10px 10px 10px 10px; margin-top: 0px; } #siteInfo img{ padding: 4px 4px 4px 0px; vertical-align: middle; } /************ sectionLinks styles **************/ #sectionLinks{ margin: 0px; padding: 0px; } #sectionLinks h3{ padding: 10px 0px 2px 10px; border-bottom: 1px solid #cccccc; } #sectionLinks a:link, #sectionLinks a:visited { display: block; border-top: 1px solid #ffffff; border-bottom: 1px solid #cccccc; background-image: url(./images/bg_nav.jpg); font-weight: bold; padding: 3px 0px 3px 10px; color: #21536A; } #sectionLinks a:hover{ border-top: 1px solid #cccccc; background-color: #DDEEFF; background-image: none; font-weight: bold; text-decoration: none; } /************* relatedLinks styles **************/ .relatedLinks{ margin: 0px; padding: 0px 0px 10px 10px; border-bottom: 1px solid #cccccc; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a{ display: block; } /************* relatedLinks2 styles **************/ .relatedLinks2{ margin: 0px; padding: 10px 0px 10px 1px; border-bottom: 1px solid #cccccc; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a{ display: block; } /**************** advert styles *****************/ #advert{ padding: 10px; } #advert img{ display: block; } /********************* end **********************/ ANY IDEAS???? Hi, i have a styling problem. The page looks well in normal view in IE and firefox but when you zoom in the page (Ctrl++) the menu bar part of the page gets displaced from its position (right and left corner). your help and guidance wil be much appreciated. The page is at dev.cddimensions. com . Plz try to zoom in and notice the menu bar. I am an art student, and I'm trying to construct my own portfolio site. I am, however, new to CSS, so I dont really know what I'm doing. I'm using Dreamweaver CS3. I'm using a fixed 2 column template, with header and footer, and the left column as the side bar. Within the right column, I'm trying to make a scrollbar hovering near the top of the div, with clickable thumbnails of my work. Once the thumbnails are clicked on, a larger version of the image takes up the rest of the column. Does anyone have any idea how to accomplsh this? Even my web design teacher's stumped with this one. I thought about using frames, but thats html... Hello, and thanks in advance for anyone who helps me with this. I want to know if it's possible to choose one color on a page and change it to another. This is the page I want to change: http://www.neopets.com/randomfriend.phtml?user=bubbapyque The menu on the left is uneditable by me because it's on Neopet's server. But I'd like to change the yellow color of the menu to something else. Possible? Thanks. Crystal I am using dreamweaver cs5 and when I test my page in firefox, it is the color that I chose ( a pink color), but when i test it in internet explorer, it is black (this is the background color). Does anyone know why this is happening and how to correct it? Also, I made my page with tables and centered the table with no margins. well the page has a huge margin gap at the bottom in google browser, but it is fine in IE and firefox. any suggestions? Thanks. Hello, I have a menu of <a> tags and when the user is on the page that the <a> tag goes to how do I keep it a different color than the rest of the <a> tags on that page? I tried a.active and it does not work. Also this page is dynamic so the nav menu is repeated often and is one block of code. Setting a different class according to each page is not an option. Thanks for the help. Hi there, I have two problems with the display of my website in different browsers. The first is when you view my site, http://www.tophatweddings.co.uk in FireFox. In IE 6 the white background extends to the foot of the content. However in Firefox you'll notice it doesn't and the left, central and right columns all finish at different levels. How can I get the white background to behave in the same way as IE? My second issue is with IE7. Now, some people might actually download and install this "browser" - those poor people. Anyway in IE 7 you'll notice the footer just decides to display halfway through the page because I guess some CSS has changed in this version of IE. Does anyone know what this could be? Help with either of these issues would be greatly appreciated and reputation points award to those who post helpful answers. Thanks - hey, i have a question regarding css on my website: http://poolghost.com/ my css file is located at http://poolghost.com/base.css basically what i am trying to accomplish is having a:hover's color change to a different color on the right side of the layout. and i would like links on the right side to be underlined. please advise.. thanks, --avery Hey, I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore. Does anybody know how to fix this? Thanks in advance. Hi All, I'm new to the forum. My website's Index page is losing all my body font and color settings, though layout is correct. All of the subfolders' index pages and other pages throughout my website remain unaffected. I've sanity checked it all, and it validates OK. I have an email in to the webhost for some input, but I hoped to get some advice from other CSS-ers who might be in the know. My website is: NickiGreenwood.com I am a romance author and sideline-web-design-junkie. Any help, advice, or even a point in the right direction would be a huge, huge help. Thanks, all. Nicki Greenwood - Romance Author Hi all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. Here's the code:
Code: <html> <head> <title>Sample Font Shorthand</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") } div { } table { width: 100% } .sttable { background-color: #000080 } tr { } td { vertical-align: top } .sttd { font: bold 12px Arial #FFFFFF } </style> </head> <body> <table class="sttable"> <tr> <td class="sttd">Catalog > Categories</td> <td class="sttd">Cart Total: $ 0.00</td> <td class="sttd">Date</td> </tr> </table> </body> </html> Would someone please tell me why the color of the text isn't rendering white? I'm making a game that revolves around four teams. For developmental purposes, I made the team colors blue, red, green, and yellow. And now I'm at the stage where I'm designing a layout. The theme is set in the 1800's, and my first idea was to have a different color scheme for each team (in accordance with their team color,) but my layouts ended up having nothing to do with the 1800's -- just colors (I want to give a very real effect to this website.) So I tried making a universal layout with a sort of tea-stained, burnt edges, parchment look, with a black background, but I had trouble making it tile nicely (partly the burnt edges, partly the stains in the paper.) So this is where I am. I need help designing a layout! I can change the team colors to whatever, I have beginner/intermediate photoshop skills (though, I'm quite competent,) and all suggestions are warmly welcomed! hello, about the well-known color warnings (and in the best interest of good accessibility practices) is setting "background-color: inherit" a proper solution? it supresses the errors, but does it solve the problem of having good contrast between different elements/the use of custom stylesheets? i'm asking because i have a stylesheet with different classes for text which are used over different background-colors (from the parent elements). so unless i make a class for each possible application of these text styles, i don't see a way to specify a fixed background-color... i hope i explained my issue properly... thanks for any thoughts or suggestions on this Hi, Im trying to validate with CSS 3, but am getting one warning, which I really want to get rid of: Code: body { color: #000000; background-color: #ffffff; font-family: sans-serif; font-size: 15px; } #header { clear: both; } #topmenu { width: 100%; height: 30px; color: #ffffff; background-color: #990000; font-family: sans-serif; font-size: 20px; font-weight: normal; padding-top: 1px; padding-bottom: 1px; padding-left: 1px; clear: both; } #topmenu a { width: 150px; height: 28px; color: #ffffff; background-color: #990000; text-align: center; text-decoration: none; border-right: 1px solid #ffffff; padding-top: 2px; float: left; } #topmenu a:hover { width: 150px; color: #990000; background-color: #ffffff; text-align: center; text-decoration: none; border-right: 1px solid #990000; float: left; } #body { color: #000000; background-color: #ffffff; margin: 10px 0px 10px 0px; clear: both; } #footer { width: 100%; color: #000000; background-color: #ffffff; font-family: sans-serif; font-size: 12px; font-weight: normal; text-align: center; border-top: 2px solid #990000; padding-top: 5px; clear: both; } #footer a { color: #990000; background-color: #ffffff; font-weight: normal; text-decoration: none; } #footer a:hover { color: #990000; background-color: #ffffff; font-weight: normal; text-decoration: underline; } #leftmenu { color: #000000; background-color: #ffffff; width: 19.5%; padding-right: 0.5%; float: left; } #contents { color: #000000; background-color: #ffffff; width: 58.5%; padding-left: 0.5%; padding-right: 0.5%; float: left; } #rightmenu { color: #000000; background-color: #ffffff; width: 19.5%; padding-left: 0.5%; float: right; } .contentbreaker { color: #000000; background-color: #ffffff; width: 100%; height: 10px; clear: both; } .menubreaker { color: #000000; background-color: #ffffff; width: 100%; height: 10px; clear: both; } .footerbreaker { color: #000000; background-color: #ffffff; width: 100%; height: 2px; clear: both; } .menutoptitle { width: 100%; height: 26px; color: #ffffff; background-color: #990000; font-family: sans-serif; font-size: 19px; font-weight: bold; text-align: center; border-bottom: 1px solid #ffffff; padding-top: 1px; padding-left: 1px; padding-right: 1px; } .contenttoptitle { width: 100%; height: 26px; color: #ffffff; background-color: #990000; font-family: sans-serif; font-size: 19px; font-weight: bold; text-align: center; border-bottom: 1px solid #ffffff; padding-top: 1px; padding-left: 1px; padding-right: 1px; } .menu { width: 100%; color: #000000; background-color: #eeeeee; font-family: sans-serif; font-size: 15px; border-left: 1px solid #990000; border-right: 1px solid #990000; float: left; } .menu a { width: 98%; height: 19px; color: #000000; background-color: #eeeeee; font-weight: normal; text-decoration: none; border-bottom: 1px solid #990000; padding-left: 2%; float: left; } .menu a:hover { width: 98%; height: 19px; color: #ffffff; background-color: #990000; font-weight: normal; text-decoration: none; border-bottom: 1px solid #990000; padding-left: 2%; float: left; } .menucontent { width: 96%; color: #000000; background-color: #eeeeee; font-family: sans-serif; font-size: 15px; border-left: 1px solid #990000; border-right: 1px solid #990000; border-bottom: 1px solid #990000; padding-bottom: 5px; padding-left: 2%; padding-right: 2%; float: left; } .menucontent a { color: #990000; background-color: #eeeeee; font-weight: bold; text-decoration: underline; } .menucontent a:hover { color: #990000; background-color: #eeeeee; font-weight: bold; text-decoration: none; } .subcontentright { color: #000000; background-color: #ffffff; text-align: right; } .content { width: 98%; color: #000000; background-color: #eeeeee; font-family: sans-serif; font-size: 15px; border-left: 1px solid #990000; border-right: 1px solid #990000; border-bottom: 1px solid #990000; padding-left: 1%; padding-right: 1%; padding-bottom: 5px; float: left; } .content a { color: #990000; background-color: #eeeeee; font-weight: bold; text-decoration: none; } .content a:hover { color: #990000; background-color: #eeeeee; font-weight: bold; text-decoration: underline; } .input { color: #000000; background-color: #ffffff; width: 100%; height: 13px; } .menuformcontainer { color: #000000; background-color: #ffffff; width: 100%; padding-top: 5px; padding-bottom: 5px; clear: both; } .menuformsubcontainer { color: #000000; background-color: #ffffff; width: 100%; clear: both; } .menuformlabels { color: #000000; background-color: #ffffff; width: 50%; padding-top: 2px; padding-bottom: 2px; float: left; } .menuformfields { color: #000000; background-color: #ffffff; width: 48%; text-align: right; padding-top: 2px; padding-bottom: 2px; padding-right: 2%; float: left; } .menuformsubmit { color: #000000; background-color: #ffffff; width: 100%; text-align: right; padding-top: 2px; padding-bottom: 2px; clear: both; } http://jigsaw.w3.org/css-validator/...ut+with_options Please make sure you select CSS 3 and Warnings = ALL in order to see the 32 warnings... Thanks! Yours sincerely, speedbooster! On two pages of my site: mileswright . com/?page_id=324 and mileswright . com/?page_id=331 it seems that part of the CSS file is being ignored. If you look at any of the other team members such as: mileswright . com/?page_id=334 you will see that the content div has padding being applied to it. In the first two pages though, the content div is being ignored. I'm really at a loss as to why this is happening. If anyone can shed some light on it I would be very grateful! (I apologize for the links not working but since I am a new poster I can't post links, but I figure that it would be pretty worthless if I didn't give links.) First of all, i'd like to thank Arnica who helped me with the first part of this post (CSS to table HELP). This is what Arnica helped me with befo (left corner image)(<== top back ==>)(right corner image) where <== and ==> represent streching horizontally in both directions. Now, i need help once again. I'd like to have side border images that strech vertically and while the body background image streching in all directions, vert and hor. Here's what i mean: (^ left border v)(<== body back ==>)( ^ right border v) where ^ and v mean streching vertically and <== and ==> mean streching horizontally. this is what i came up with so far: Code: <table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--title bar--> <div style="margin: 0px; position: relative; float: left; width: auto; height: auto; "><img src="img_inside_article_title-bar_left.gif"></div> <div style="margin: 0px; position: relative; right: 6px; float: right; "><img src="img_inside_article_title-bar_right.gif"></div> <div style="margin-left: 7px; margin-right: 7px; height: 30px; width: auto; position: relative; left: -3px; background-image: url(tile_inside_article_titlebar_bak.gif); "> This is a test</div> <!--article--> <div style="position: relative; float: left; width: 10px; height: auto; background: url(images/layout/home_tech-images/tile_inside-window_left-border4.gif); " > </div> <div style="position: relative; width: 10px; float: right; right: 6px; background: url(images/layout/home_tech-images/tile_inside-window_right-border4.gif) right repeat-y; "> </div> <div style="margin-left: 10px; margin-right: 10px; height: 30px; width: auto; height: auto; position: relative; background: url(images/layout/home_tech-images/tile_back1.gif); "> This is a test<br>and again</div> </table> !!my appologies for the sloppy code, still learning!! In ie the above code works perfectly, the code under <!--article-->, where the borders strech in respect to the text in the center, but in firefox the sides strech for ever vertically!! HELP!!!!!!!!!!!! fz105 hi, is it possible to have a bg in a cell only to go half way accross the cell? |