Fixin IE 7 CSS-problems without extra CSS

Lately I have been working on the layout for a foundation.
The project only has to be finished by February, so there is plenty
of time left. The design looks alright with Firefox, Opera and
Safari for Windows, but something goes wrong as soon as IE 7 tries
to interpret the CSS. The content-layer is not in place and the
"the round corners" at the bottom are not repeated only ones (as
demanded by the CSS).
I already wrote an extra stylesheet which already works out
alright on my localhost, but it hasn't got any round corners and
the layers are arranged "absolute" which (to me) is a less than
elegant work-around and might cause a few problems depending on
resolution and screen-format.
Does anyone have a suggestion how to fix this prpoblem within
the normal CSS which is still in the page code in
http://stefanweisshampel.de/versuch.html
and
http://stefanweisshampel.de/versuch_blau.html?

Is this the complete code?
Your first property declaration value on the margin of the
div containing the <ul> navigation is pulling the div 140px
towards the top of the containing element. That could push the div
off of the page, depending on the rest of your code and page
structure. Are you feeding these values to IE only? What is the
-140px top margin supposed to be doing? Check that first.
On browser detection, beware, many browsers report themselves
as something else! It is better to learn the different browser
inconsistencies and design for them. As Win IE (mainly pre V IE7
nowadays) is the main problem child here, using Conditional
Comments can help feed specific css to that particular browser and
its derivatives. Google for Conditional Comments for more
information.
Regards
Nick Barling

Similar Messages

Fixing IE 7 CSS-problems without extra CSS

Lately I have been working on the layout for a foundation.
The project only has to be finished by February, so there is plenty
of time left. The design looks alright with Firefox, Opera and
Safari for Windows, but something goes wrong as soon as IE 7 tries
to interpret the CSS. The content-layer is not in place and the
"the round corners" at the bottom are not repeated only ones (as
demanded by the CSS).
I already wrote an extra style sheet which already works out
alright on my localhost, but it hasn't got any round corners and
the layers are arranged "absolute" which (to me) is a less than
elegant work-around and might cause a few problems depending on
resolution and screen-format.
Does anyone have a suggestion how to fix this problem within
the normal CSS which is still in the source code of
http://stefanweisshampel.de/versuch.html
and
http://stefanweisshampel.de/versuch_blau.html?
Is there any flaw I overlooked (Percentages, order of the
tags, etc.)? I really don't know what is wrong, the standard
approach worked out perfectly alright with other pages.

you can check these sites:
http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx
http://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Standards-Compliance-in-Internet-Explo rer-7/
Titti
http://textures.z7server.com/

Anonymous Portal ... Problem accessing images, css, js

Hi, i'm trying to build a web site to be accesed from internet and i'm having some trouble with some specific points (i'm new with SAP). I've seen many questions like this in the forums but none are finally answered.
I setup the anonymous portal based on SAP Instructions (help.sap), i'm using the Guest user to the anonymous users and i can access without login throught this adress http://localhost:50000/irj/portal/anonymous.
<b>First Question</b>
When i create a html using the html editor from the KM it work fine, i can see the page with the styles i used; but when i inssert an image uploaded, the page start to ask for authentication and don't show the image, if i enter a valid user and password it shows the image correctly. I tryed assinging permissions to the Guest user over the image and it doesn't work. As you know as i'm trying to make a Web Site to run on the Internet and it cannot ask the users of the portal to authenticate, this is my first question, how can i setup the portal to not ask authentication for this image? if i access the image directly also ask for authentication and shows an unauthorized page, i tryed this two links: http://localhost:50000/irj/go/km/docs/documents/abc_htmlfiles/images/0186.jpg
http://localhost:50000/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/documents/abc_htmlfiles/images/0186.jpg
<b>Second Question</b>
Locally i create a html and i upload it through the KM, i used separate .css file (style sheet file) and .js file (javascript file) to make some effects but when i load the html to the KM Document Iview it shows only the text and doesn't recognize the files with the styles or the javascript; i have the html over the abc_htmlfiles directory (my test directory) and the css files on the css directory, look this is the directory structure on KM:
/root/documents/abc_htmlfiles/page0.html
/root/documents/abc_htmlfiles/css/styles0.css
/root/documents/abc_htmlfiles/js/script0.js
from the html i've tried to access the .css and .js like this:
<LINK rel="stylesheet" href="css/styles0.css" type="text/css"/>
<SCRIPT src="js/script0.js" type="text/javascript"></SCRIPT>
What is the path to access this kind of resources?
<b>Third Question</b>
Now i just can create html content in the web site, but i don't know how to create a navegation menu, a menu which show me the different sections and iviews, do you have a link where i can get a step by step to create a menu like this?
I really appreciate answers to my questions and think that i can assign some points (if you explain me how) to the people who help me.

First Question
I solved my problem following the SAP Note 837898, I am using the NW04 SP16 - Enterprise Portal 6.0.
The problems as i understood is that SAP Portal uses WebDav authentication throught the default access /irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/, to avoid that authentication when using anonymous you have to config the portal to allow this path to access the documents in KM /irj/go/km/docs/. The way you config the portal is described step by step in the <b>Note 837898</b> .. I followed all the steps (including the ones who modifies the Standard User Role iviews in Portal Content) and finally i restarted the Portal.
It works for me and my SAP EP version.
Second Question
The 2nd Question was solved the way one of the posters said in this thread, but to anonymous portals after config the Note 837898 you should use the path <b>/irj/go/km/docs/</b> to avoid the authentication window which prompts for the user and password.
<LINK REL=stylesheet HREF="/irj/go/km/docs/documents/abc_htmlfiles/css/styles0.css">
<SCRIPT src="/irj/go/km/docs/documents/abc_htmlfiles/js/scripts0.js" type="text/javascript"></SCRIPT>
Third Question
The menus in SAP portal are made with Roles and assigned to the groups that are going to have access to the options of the menus .. it's quite simple following the links suggested in the answers already posted in this thread.

CSS problems in Dreamweaver CC?

I am having problems getting the CSS to update properly when I make changes to the code in the CSS document in the left panel. I have to go into CSS Designer to make the changes in addition to writing code in the css document, but it is often easier to update the code in the document and not use CSS Designer.
At one point, a bizarre thick border appeared on an element that I had NOT styled in either CSS Designer or in the CSS document. When I tried to change the border, the border did not show up in settings in CSS Designer or in the CSS document panel. The only place that affected the border was by using the Properties in the panel at the bottom of the app window. Once I accessed the "CSS Designer" from the Properties panel, I could see the settings and get rid of them.
Wondering if this is some kind of bug? Or if anyone else is experiencing problems making changes to css in the css document window?

I'll look for a DW forum. FYI, I'm on a Mac OS10.8.5, with most recent update for DW CC. I attached an external css to the file and it is shown correctly under Sources in CSS Designer (no extra styles are in the head of the document); that part works just fine. Formatting borders is pretty straight-forward—specify style, width, color for each side.
The question is why changes to the css don't always take effect if I write the css as code in the css panel (on the left side using split view)—even when I do a save. When I ALSO change settings in CSS Designer the changes DO appear in the CSS code panel, even duplicating the code I just entered there. One time I had to use the "Edit Rule" in the Properties box at the bottom of the app window to get the css to update.
The lack of consistency interferes with workflow.
I wish I could write the css in the code panel and have a refresh button like the one for Source Code changes.
Often it is much faster to write the css in the code panel. Scrolling through all the settings of the CSS Designer can be tedious and it's easy to make mistakes.
An example of this css is a sidebar div with a bottom border. When I was setting this up, it ended up with a thick solid black bottom border and I had trouble making a change. Eventually I succeeded via the Properties panel, but it should have updated via the css code panel OR CSS Designer.
#sidebar {
border-bottom: thin dotted #055900;
So, maybe this is a Creative Cloud issue, or maybe a DW issue.

Very strange problem! Disappearing Css Style Sheets plus 404's

I am creating a fairly simple form and am new to php mysql and jquery. However, I am moderately skilled in css and html.
I am on a mac with Snow Leopard using dreamweaver CS5. The problem started this morning when I uploaded a preliminary version of my html form page and a php script page.
Having previewed it with no problems on my local system, I thought my main challenge would arise from stumbling my way through ironing out the scripting. I still have that to look forward to.
The first anomaly that occurred was that I kept getting 404 errors. After hours of tinkering around and uploading many trimmed down modified variations of the html file, I finally got past the 404 error page.
However, it only would appear without my css styles. The file was originally linked to a previous css style sheet and is linked to a new one on local system.
After doing some firebugging, I discovered that my newly uploaded (20 times) html file was still linked to the previous phantom, css style sheet on the server as well as a previous php file that I had linked to in development stages.Both of which are not on the server. So I uploaded the whole bunch of them again and got the same result. Nothing changed. All the css styles are still there but not.
I know what you're thinking, it's impossible.
The only explanation I can come up with is that my linux apache server is putting my files in a nonexistent temp folder. And for some reason the my site.css file is not being overwritten or removed at all.
I then uploaded new versions of the html file with different names, thinking on an off chance that the file name 'contactform' might have something to do with the problem.
You know what happened the newly named files triggered a 404 once again.
It doesn't make since to me! I am totally stumped!
My site is http://www.zoeinjewels.com and the page in question is http://www.zoeinjewels.com/contactform.html
I am really behind schedule so your help would be most appreciated.
Thanks

Your CSS file as wel as both of your JS files are corrupt.
Re-upload these three files and your problem is solved.
To give you an idea of what your online CSS file looks like
http://www.zoeinjewels.com/contactform.html
http://www.zoeinjewels.com/_ccs/contact3.css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>404.shtml</title>
<link href="_ccs/errorpage.css" rel="stylesheet" type="text/css" />
</head>
<div id="wrapper">
<div id="header">
<h1><span></span>File Not Found<a name="top" id="top"></a></h1>
</div>
<div id="blback">
<ul id="nav">
<li><a href="#" class="Home">Home</a>
<ul>
<li><a href="index.html">Home</a></li>
</ul>
</li>
<li><a href="#">Welcome Lounge</a>
<ul>
<li><a href="welcome/index.htm" title="Entry Lounge">Entry Lounge</a></li>
<li><a href="aboutzoein/index.html" title="About Zoein">About Zoein</a></li>
<li><a href="aboutzoein/shunyata/aboutshunyata.html" title="About Shunyata">About Shunyata</a></li>
<li><a href="aboutzoein/media-book/index.html" title="In The Press">In The Press</a></li>
<li><a href="aboutzoein/media-book/peoplespeak.html" title="People Speak">People Speak</a></li>
</ul>
</li>
<li><a href="#" class="JewelGallery">Jewel Gallery</a>
<ul>
<li><a href="jewelgallery/p27.htm" title="Z Garlands">Garlands</a></li>
<li><a href="jewelgallery/p51.htm" title="Z Rings">22k Rings</a></li>
<li><a href="jewelgallery/p01.htm" title="Z Bracelets">Bracelets</a></li>
<li><a href="jewelgallery/p79.htm" title="Z Pendants">Pendants</a></li>
<li><a href="jewelgallery/p79.htm" title="Z Brooches">Brooches</a></li>
<li><a href="jewelgallery/p09.htm" title="Z Earrings">Earrings</a></li>
</ul>
</li>
<li><a href="#" class="ContactCenter">Contact Center</a>
<ul>
<li><a href="contact.html">Bali Studio</a></li>
</ul>
</li>
</ul>
<div id="content_r">
     <h6><span></span>
     <div id="title">Sorry, the file you were looking for could not be found. It may have moved to a new location. Please use the navigation menu above to help you locate the file.</div>
    </h6>
      <div id= "topimage"></div>
   <div id="notfound"></div>
    <div id="text">
<p>"Sacred Geometry is the foundation of their jewelry designs and symbols are drawn from all the different traditions the world has to offer. Each precious piece endeavors to express three symbolic levels-the common, the educated and the spiritual-with careful selection of each stone to reflect meaning and value... The design and creative process is not a brief one. Each conscientious step reflects a careful and significant thought process. According to Shunyata "Every moment isinspired by the wealth, rhythm and miraculous spectrum of creation."</p>
</div>
</div>
</div>
</body>
</html>
I hope this helps.
Ben

Problem with PHP, CSS & Code Navigator in CS4

Hi,
I've got al little problem with code navigator. To show the problem, I created this 3 files:
test1.html
The CSS-Definition is defined static, with simple HTML.
<html>
<head>
     <style type="text/css">
          @import "test.css";
     </style>
</head>
<body>
      <p>Hello World</p>
</body>
</html>
test2.php
The CSS-Definition is defined dynamic, with PHP-Code.
<html>
<head>
     <style type="text/css">
          <? echo "@import \"test.css\";\n"; ?>
     </style>
</head>
<body>
      <p>Hello World</p>
</body>
</html>
test.css
The CSS-File which is imported in test1.html and test2.php
p {
     font-size:20px;
The Problem in Dreamweaver CS4
When opening the test.html - File in Dreamweaver CS4, I can easily see the CSS-Definition of the <p>-Tag in Code Navigator. To edit these definition I can simple open the test.css by clicking on the definition in Code navigator. For a complex webpage this is a greate feature. Sadly, this does not work, when I open the test2.php. Although when going to Live View and selecting the <p>-Tag I can see the CSS-Definition and the file in which it is defined in Code Navigator. But by clicking on the definition the test.css DOES NOT OPEN!
Has anybody a solution? Because many of our projects have dynamic CSS-Definitions, it would be a shame, if this would not work.
Tanks for help! :-)

I've done some testing, which might point you in the direction of an interim solution.
This is the code for related_files.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Related files test</title>
<?php include('include.css'); ?>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
This is the code for include.css:
<style type="text/css">
p {
     font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
     color:#F00;
</style>
Note that the include file contains the opening and closing style tags.
By including your styles like this in a PHP include file, Dreamweaver applies the CSS in Design view (you don't need to turn on Live View). Holding down the Alt key while clicking in Design view brings up the Code Navigator with all the details of the CSS. The one missing link in the chain is that clicking the style selector in the Code Navigator does not open the CSS file. However...
The file that contains the CSS is listed in the Related Files toolbar, so you can edit it in Split view, and see the results in Design view in exactly the same way as with an HTML page and ordinary style sheet.
As I say, not the full solution that you wanted, but it might be something worth experimenting with.

Css problem in internet explorer

Hi to all!
On my page as part of the page template I have build in a little drop-down user panel on the left top of the page.
html:<div id="userpanel">
<span><img src="'#APP_IMAGES#openSlidedown.png" /> <a>logon: &APP_USER.</a>
<div id="userpanel_hsreg"><p>Autorisiert für: &APP_CODES_DISP.</p>
<p>| #NAVIGATION_BAR#</p>
</div></span>
</div>css:#userpanel,
#userpanel * {
        position:relative;
     font-family:verdana; font-size:12px;
     margin:0; padding:1px; border:0;
     white-space:nowrap;
#userpanel a,
#userpanel span { display:inline-block; }
#userpanel>span>a { color:#999; }
#userpanel span:hover div { display:block; }
#userpanel>span:hover > a { color:black; }
#userpanel_hsreg {
          display:none;
          position:absolute;
          left:+5px;
          top:+24px;
          background:#fff;
          padding:10px 18px;
          line-height:180%;
          border:1px solid silver;
          border-radius: 6px;
          box-shadow:1px 2px 5px #aaa;
          z-index:99;
#userpanel>span>a {
          border-bottom:1px solid silver;
          margin-top: 5px;
          }So what happens is this: if the user hovers over the "+logon: username+", a little box pops up with some further information (the item &APP_CODES_DISP.) and the logout-link. Below this link, the Navigation bar starts. So while the box pops up, it covers a part of the region below, what its meant to do.
The promlem is, that this doesnt work in Internet Explorer properly, when its launched from apex. Instead, the popup-box is displayed behind the region below. In Mozilla, as always, everything worls fine. This problem ocured already, when I opened the html-file from desktop, but I fixed that by putting the z-index-attribute in. Only now, in Apex, its still now working in IE. I am not that of an expert in css. I have tried different XHTML declarations in the header, all no difference.
The current one:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">This might be a bit of a tricky issue, so I dearly hope, someone can help me. (Similar problem like the other threat I started recently here where the round-corner attribute is not working in IE-Apex, but this time its a bit more vital. :) )
I have v 4.0.2.
Thanks and greetings,
tobi

Hi again!
This turns out not to be an APEX-issue, as I tought first, but rather a css-problem. Maybe therefore I'm in the wrong forum, but maybe someone can help me anyway.
I have created two pages with the relevant element: (login with test/test please) one page with standard tabs and another with my own html-navigation. Now Internet Explorer has the option "Compatibility View" which in our company is activated by default. On page 1 it makes no difference, but on the second, with Compatibility View on, the drop-down box apeares behind my selfimplemented navigation bar. WHY IN GODS NAME DOES THIS HAPPEN??
I have posted the same question in a german web-developer forum (here) also, because its quite urgent that I solve this, and as I mentioned above, many colleagues work with IE.
So if anyone here is a css-IE9-expert... :)
Thanks and best regards,
Tobi
edit: ok, its solved. The userpanel-div needed a "z-index:1;" attribute for IE. :)
Edited by: tpetri on 03.09.2012 09:53

CSS Problem - Background repeat & Max/Min Width

I have the problem at lower resolutions that the content div sticks out of the main document.
Or in fact, the content isnt sticking out, its the background repeat that is in the right of the screen thats pushed into the doc.
And also the background repeat isnt always repeating till bottom. It doesnt matter how big a negative margin is.
How can i let the background repeat right stick to the end of the document instead of the width of screen?
How can i let the repeat continue so it goeas all the way down?
Here's the CSS:
@charset "utf-8";
/* CSS Document */
/* Main Floats */
html,body {
     height:auto;
     min-width:800px;
     width:auto;
     background: #FFFFFF url(../Art/Background.png) no-repeat center;
     background-attachment:fixed;
     color:#000;
     margin:auto;
#BackGrRepeat1{
     float:right;
     height:auto;
     width:auto;
     min-width:800px;
     background: transparent url(../Art/greenfade_right.png) repeat-y right top;
     background-attachment:fixed;
     margin-right:-0px;
     margin-top:-10px;
     margin-bottom:-150px;
#BackGrRepeat2{
     float:left;
     height:auto;
     width:auto;
     min-width:800px;
     background: transparent url(../Art/greenfade_left.png) repeat-y left top;
     background-attachment:fixed;
     margin-left:-0px;
     margin-top:-10px;
     margin-bottom:-150px;
#WContainer{
     margin: 10px auto;
     width:80%;
     background:none;
     min-height:50%;
     line-height: 130%;
#WHeader{
     padding: .5em;
.TabbedPanelsContentGroup{
     min-width:600px;
.VTabbedPanels .TabbedPanelsTabGroup {
     float: left;
     width: 172px;
     background: none;
     margin: 0;
     margin-left:-3em;;
.VTabbedPanels .TabbedPanelsContentGroup {
     margin-left: 172px;
     min-height:18em;
     padding: 2em;
     border-left: solid 1px #999;
     border-bottom: solid 2px #999;
     border-top: solid 1px #999;
     border-right: solid 2px #999;
#WFooter{
     clear: both;
     margin: 0;
     padding: .5em;
/* Text Styles */
h1{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif; color:#05692E;
font-weight: bold;
font-style:italic;
font-size: 3em;
line-height:105%;
h2{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif; color:#078330;
font-weight: bold;
font-size: 2em;
line-height:105%;
p{
font-family: "Verdana", verdana, arial, helvetica, sans-serif;
font-size: 1em;
margin-top: 0;
.small{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
font-size: .7em;
text-align:center;
/* Menu Buttons */
.TabbedPanelsTabGroup ul{
list-style-type: none;
padding: 0px;
margin: 0px;
.TabbedPanelsTabGroup li{
list-style-type: none;
padding: 0px;
margin: 0px;
.Button a{display:block;}
.Button a:hover{background-position:left bottom;}
a.Button {display:none}
/* Text Images */
.floatright
float: right;
width: 100%;
margin: 5px auto;
background-color: #fff;
padding: 5px;
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
div.floatright img
border-top: 2px solid #555;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 2px solid #555;
.floatleft
float: left;
width: 100%;
margin: 5px auto;
background-color: #fff;
padding: 5px;
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
div.floatleft img
border-top: 2px solid #555;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 2px solid #555;
/* Message Screens */
#message{
     margin: 50px;
     min-height:18em;
     padding: 2em;
     border-left: solid 1px #999;
     border-bottom: solid 2px #999;
     border-top: solid 1px #999;
     border-right: solid 2px #999;

I think you're going about this the wrong way. When you float content, it is removed from the normal flow. That's why your floated right background doesn't reach page bottom.
Look at this DEMO of a centered liquid layout page.View source in browser.
http://alt-web.com/TEMPLATES/CSS2-Liquid-Page.shtml
Using my demo as an example, you could place a repeating, solid light-green image in the body to give the page its borders. Add another repeating background to the #wrapper division.
Add a 3rd background image or light color to the #content division.
Use floats for sidebar content only.
Hope this helps.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Preview css code without html??

I am learning CSS and very slowly.
I would like to know if there is any way that I can "see" if my css code is working the way I want it to.
Since there is no display in CSS , only html, I'm guessing I have to link the CSS to the html in order to see
if the CSS code is working the way I want.
Is there an easier way to "try out" css code?
Perhaps another way to get it to display without linking it to an html file?
Maybe there is another program that will let one "view" css code?
Maybe something online that will do this?
I really could use something like this.
Otherwise, can someone tell me, in the most basic, simple terms, how I can link my Css code page
to an html page, so i can preview if my CSS code is doing what it's supposed to?
thanks!!!!!

I hope this makes sense. thanks again!
Not really. I don't understand the workflow you're attempting.
CSS formats HTML pages. I link one external CSS stylesheet to all my HTML pages then tweak the CSS in the external CSS file and "see" the results of my tweaks on the HTML page I'm actually formatting.
In other words, I preview my changes on the HTML page which is actually linked to the CSS stylesheet.
You seem to be wanting to set up your CSS in isolation to your HTML page then, when you've got it right, you want to apply the CSS to the actual HTML page.
Am I missing something?
These are some of the ways I think might work:
<td><span style=”background-color:yellow”>Breakfast</span>..</td>
<td style=”background-color:yellow”>Breakfast</span>...</td>
<td><span style=”bgcolor:yellow”>Breakfast</span>..</td>
<td><span style=”color:yellow”>Breakfast</span>..</td>
but I need to try them all to see which is the one that will give me the desired result (highlight the word Breakfast in yellow).
You've lost me here I'm afraid. Why not let DW do the coding for you?
e.g. <span style=”bgcolor:yellow”> is invalid CSS code. DW will code it for you.
Avoid inline styles <td style=”background-color:yellow”> and <span>s wherever possible. Use them in an emergency only when no other option exists. Otherwise, every time you tweak a color, you have to update every single affected <td> and <span> tag which defeats the reason for using CSS in the first place.
CSS can be applied in several ways. In order of preference:
1) External, linked styesheet (preferred option every time)
2) Embedded stylesheet (rules grouped into the <head> section of a HTML page)
3) Inline styles (CSS inline with the HTML code scattered throughout the page) - emergencies only or where no other options exist such as HTML email formatting
You're starting with option 3) and making life hard for yourself.
It's more powerful and efficient to define a CSS class for a highlighted table cell - in an external stylesheet which is linked to the HTML page:
e.g.
Separate CSS file
td.highlight {
background-color: yellow;
HTML (with CSS file linked to it)
<td class="highlight">Breakfast</td>
You can do this for all highlighted <td>s on all HTML pages on your website - be it one or 1000.
Later, if you want to change yellow to green, you change the CSS rule in the external CSS stylesheet (you don't have to touch the HTML file at all):
td.highlight {
background-color: green;
upload that one tiny stylesheet file to the server and your entire website (all 1000 pages) is instantly updated.

@import css problem

Hi,
I'm trying to import an external css to the main CSS.
master.css
@import url(style.css);
@import url(layout.css);
It doesn't get it, and I'm having a huge CSS file with everything mixed, and I'd like to distribute the stuff.
If anyone can help...
Thanks!
Jdev 11g 11.1.1.0.1

Thanks for answering.
It doesn't work.
I've tried the following options:
@import url("archive.css"); --> not working
@import "archive.css"; --> not working
@import archive.css; --> does not compile the project
<style...>@import ... </style> --> not working
I'll explain myself better.
I have a project and I've made a CSS file wich modifies the whole project visual design.
What I need is to redisrtibute the contents of this huge file in small files like "layout.css", "forms.css", "content.css", ... and call just one file "master.css" wich has got all the css @imports.
For example:
MASTER.CSS
@import url("layout.css");
@import url("forms.css");
@import url("content.css");
The problem is that it doesn't do the @import. It's like if MASTER.CSS was empty.
Just in case, I've included the css files in the trinidad-skins.xml, but even though it doesn't work.

Yes another strange IE CSS problem

Hi all,
I was wondering if some kind soul could help me work out
hopefully my last CSS problem. If you look at my site:
http://www.aclighting.com/shop/
in IE you will see a light blue line at the bottom of the left hand
side navigation menu. In Firefox and other browsers it isn't there,
they are behaving, but I can't work out why IE is showing that
there.
This is the HTML
Class mid is what shows the blue line.
#shop #content-wrapper #menu .mid {
background: url(/images/menu_div.gif) no-repeat left top;
padding-top: 9px;
padding-left: 5px;
color: #FFFFFF;
font-weight: bold;
font-size: 100%;
I don't understand why its showing near the botton in IE.
Steve

Doooza wrote:
> Hi all,
> I was wondering if some kind soul could help me work out
hopefully my last CSS
> problem. If you look at my site:
http://www.aclighting.com/shop/
in IE you will
> see a light blue line at the bottom of the left hand
side navigation menu. In
> Firefox and other browsers it isn't there, they are
behaving, but I can't work
> out why IE is showing that there.
> I don't understand why its showing near the botton in
IE.
Its on you background image?
http://www.aclighting.com/images/menu_bottom.gif
IE is probably making a container slightly higher for some
reason and
therefore shows more of te background image.
Just use a 'dedicatted' background image minus the blue line

Possible CSS problem?

Hi All,
I am in the process of making a website for a friend, when I ran into what looks like a css problem.
I purchased the css file in a template from a guy who does tutorials on youtube, I have contacted him on several occasions but his customer service is pretty awful and he hasn't replied to any contact.
When using a mobile or tablet to view the website the header and footer area is pushed to the left. (please see attached image)
I added 100% to the following containers but still it never changed them.
#header-wrapper
#footer-content-wrapper
#footer
If I change the widths to 1000px then it sorts it out for the mobile view but then the website on a pc/laptop is distorted.
the website can be found at www.leightonsterling.com
Thankyou in advance.

There's nothing wrong with your site. That's exactly what fixed-width, centered layouts do in smaller displays. They move to the left. If you want a responsive web site that adjusts to mobile and tablet device widths, you need a Responsive Layout.
Look at FluidGrid Layouts in Dreamweaver CS6 & CC. Or use one of the following Responsive Frameworks to jump start your project.
Project Seven's Page Packs (commercial CSS Templates, Widgets & Extensions for DW)
http://www.projectseven.com/products/templates/index.htm
Excellent products, excellent customer support. A+++
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's Bootstrap extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Fluid Grid Layouts in CS6
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/
Nancy O.

Problem in Loading CSS and JS in strus

Hi,
I created an employee registration form using JSP. When I load the "Registration Form" That time my CSS and JS are working well.
Its works fine if all the fields are entered correctly then "sucess form is displaying". If I give wrong field entries after submiting the form. I am doing the server validation. If any field is missing or wrong I calling "fail" and forward to same employe registration form. When this form is loaded at that time my CSS and JS not working.
Please help me. my JSP page

<%@ page import="modEmp.bisCommon.*,java.util.*,modLogin.bisCommon.*"%>
<%@ include file="init.jsp"%>
<%!
     ArrayList<String> list = new ArrayList<String>();
     ArrayList<String> list1 = new ArrayList<String>();
     String rec[]=new String[150];
     cBLabels cbl1 = null;
%>
<%
     for(int i=0;i<rec.length;i++)
          rec="";
cbl1 = new cBLabels();
     rec=cbl1.getLabels();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Employee Registration Form</title>
<script language="javascript" type="text/javascript" src="js-modEmp/addEmpval.js">
</script>
<script language="javascript" type="text/javascript" src="js-modEmp/datetimepicker.js">
</script>
<link rel="stylesheet" type="text/css" href="css-modEmp/styles.css">
</head>
<body onLoad="clearForm();">
<%
     try
          if (request.getAttribute("submit").equals("fail"))
%>
               <%@ include file="failure.jsp"%>
<%
     catch (Exception ex1)
%>
<%@ taglib uri="/META-INF/tlds/struts-html.tld" prefix="html"%>
<%@ taglib uri="/META-INF/tlds/struts-bean.tld" prefix="bean"%>
<html:form action="addemp.do">
<h2>EMPLOYEE REGISTRATION FORM </h2>
<h2 style="font-style: italic;">Personal Details</h2>
<%=rec[0]%>:      <html:text property="fname" size="20"/>      <%=rec[1]%>:      <html:text property="mname" size="20"/>
<%=rec[2]%>:      <html:text property="lname" size="20"/>      <%=rec[3]%>:      <input name="calc" id="demo1" type="text" size="20" disabled>Pick a date<html:hidden property="dob" />
<%=rec[4]%>:      <html:text property="mobileno" size="20"/>      <%=rec[5]%>:      <html:text property="emailid" size="20"/>
<%=rec[6]%>:      <html:text property="ftname" size="20"/>      <%=rec[7]%>:      <html:select property="gender"> <html:option value="male">Male</html:option> <html:option value="female">Female</html:option> </html:select>
<%=rec[8]%>:      <html:text property="nationality" size="20"/>
</html:form>
</body>
</html>
This is my strus-config.xml file
<struts-config>
     <form-beans>
          <form-bean
name="inputForm"
type="modEmp.bisVo.cVEmployee"/>
          <form-bean
name="searchForm"
type="modEmp.bisVo.cVSearchEmp"/>
          <form-bean
name="leaveForm"
type="modAttendance.bisVo.cVEmpLeave"/>
          <form-bean
name="loginForm"
type="modLogin.bisVo.cVLogin"/>
<form-bean
name="changepassForm"
type="modLogin.bisVo.cVChangePasswd"/>
<form-bean
name="empSalForm"
type="modSalary.bisVo.cVoUpdateEmpSal"/>
     </form-beans>
     <action-mappings>
          <action
path="/addemp"
type="modEmp.bisAction.AddEmpAction"
          input="/jsp-modEmp/addempform.jsp"
name="inputForm"
               scope="request">
               <forward name="success"
                    path="/jsp-modEmp/success.jsp"
                    redirect="false"></forward>
               <forward name="fail"
                    path="/jsp-modEmp/addempform.jsp"
                    redirect="false"/>
          </action>
</action-mappings>
     
</struts-config>
Help me.....

Hi dude,
You can solve this using two ways...!
1. You can give the hard-core path (full path with the project name: /ProjectName/DirectoryName/JavaScriptFileName.js)
2. You can use request.contextPath() (to get the current context name)
Try this below code
<head>
<title>Employee Registration Form</title>
<script language="javascript" type="text/javascript" src="<%=request.getContextPath%>/js-modEmp/addEmpval.js">
</script>
<script language="javascript" type="text/javascript" src="<%=request.getContextPath%>/js-modEmp/datetimepicker.js">
</script>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath%>/css-modEmp/styles.css">
</head>

Use standard GUI status in customer GUI status without extra programming

Hi,everyone.
I have a problem in my development.
now, I'm developing my own dialog program. And I need use my own GUI status.
there are some buttons on application tool bar.when I click some buttons on the
application tool bar,the program will do something according to the function code.
But now, I also need the standard tool bar in the screen too.yeah,I know I can input function code
to the buttons of the standard tool bar and the buttons of standard tool bar will be bright and can
be clicked. But when I click the button on the standard tool bar like 'back', the program will not
return to the previous screen .
so, what I want to know is how can I make the buttons bright and achieve the functionality provided
by the standard tool bar without extra programming.

HI,
you can use Tcode SE41 ( MENU PAINTER ) to copy the status of a standard program.
to go back to the screen from where you come from like the standard BACK button.
in PAI
module go_back.
in abap source code the module looks like this
module go_back.
case sy-ucomm.
when 'BACK'.
LEAVE TO SCREEN O.
endcase.
endmodule.
to by pass the screen validations the above code should be written in
MODULE MNAME AT EXIT-COMMAND.
in the PAI.
Thanks and regards
Ramchander Rao.Krishnamraju

One css for phone, one css for tablet : how ?

Hi
Here is my problem : i'm able to detect if the my mobile application run on a tablet or on a phone by calculating the diagonal of the stage
But then, i need to load the good css : the smarphone.css or the tablet.css
I try by compiling css as swf, BUT the problem : iOS doesn't permit to load external swf and in this case, smartphone.swf or tablet.swf are external swf
So my needs is to switch the css at runtime, but not by loading external swf
I try with <fx:Style source.myStateTablet="" /> but it's not possible
Any ideas ?
Thanks
Sebastien

Hi
Actually my css is like that :
tablet.css :
components|Header
    skinClass: ClassReference("com.zapmeeting.zinfotv.skins.tablet.header.HeaderSkin");
smartphone.css :
components|Header
    skinClass: ClassReference("com.zapmeeting.zinfotv.skins.mobile.header.HeaderSkin");
In fact, I use css juste to reference skinClass and so apply a skin
So your idea is to make juse one css, called main.css and then paste in the above code ?
components|Header
    skinClass: ClassReference("com.zapmeeting.zinfotv.skins.tablet.header.HeaderSkin");
components|Header
    skinClass: ClassReference("com.zapmeeting.zinfotv.skins.mobile.header.HeaderSkin");
but how redirect the user to the correct skinClass ?
could I insert a state query like :
components.tablet|Header
    skinClass: ClassReference("com.zapmeeting.zinfotv.skins.tablet.header.HeaderSkin");
where tablet and smartphone are two states ?

Fixin IE 7 CSS-problems without extra CSS

Similar Messages

Maybe you are looking for