Search results matching tag 'CSS'

Hide a disabled vertical scrollbar in IE6

Gabriel_Haukness — Thu, 10 Dec 2009 05:00:00 GMT

I have to use an i-frame to load a SharePoint page underneath this one. IE7 was not rending the page correctly. So I applied the fix and now IE6 displays 2 vertical scrollbars. The outer one is functional (scrolls) the inner one is ddisabled and does nothing. I cannot seem to find the id or style the inner disabled scrollbar for the life of me. Yes I have already tried overflow and scrolling attribute changes. Any help appreciated!

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UnitedHealth Networks - UnitedHealthcare</title>
<style type="text/css">
html {
overflow:hidden;
/*scroll bar styling affects the Outer scrollbar
scrollbar-base-color:#000000; */
}
body{
/* The overflow in this element by itself hides ALL scrollbars overflow:hidden;*/
/*scroll bar styling affects the Outer scrollbar
scrollbar-base-color:#000000; */
}

#childframe {
/* no effect
scrollbar-base-color:#000000;
overflow:hidden; */
}

</style>
</head>


<body style="margin:0;" onLoad="resizeFrame(document.getElementById('childframe'))">
<script type="text/javascript">

function resizeFrame(f) {
f.style.height = f.contentWindow.document.body.scrollHeight + "px";
//f.style.overflow = "hidden"; doesnt work
//f.style.display = "none"; works
}
</script>


<iframe src="http:/xx/sites/web" frameborder="0" name="childframe" id="childframe"
onload="" style="width:100%;height:100%;" />

<script type="text/javascript">
frames[0].document.designMode="on";
frames[0].document.open();
</script>

</body>
</html>

css font gradiant

chchinmaya — Wed, 09 Dec 2009 05:00:00 GMT

Hi All,

in my project i am displaying some text dynamically i want to give the text color as gradiant i dont know how to do this with css can any one please guide me how to do this.

Regards,

Chinmaya.

Styling DropDownList with CSS

Gimbal5401 — Tue, 08 Dec 2009 05:00:00 GMT

I have a site that uses alot of forms and i have styled the text boxes to look all lovely and rounded using css and an image.
The code for this is below:

/* rounded text boxes */
.roundedloginboxdiv
{
margin:0;
height:21px;
width:120px;
background:url(../images/login_bg.png) no-repeat bottom;
}

.roundedloginbox
{
background:none;
border:none;
width:105px;
height:15px;
margin:0;
padding: 2px 7px 0px 7px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

The problem i'm having is applying a similar style to the drop down lists.
I just cant seem to get them to work correctly.

Has anyone else had this problem? I cant find anything online that will solve my problem and so am asking you guys for help.

Thanks

CSS displays differently on web server than on development environment

Sunoneko — Tue, 08 Dec 2009 05:00:00 GMT

Hello.

I have this problem where the web application that I have created in my development environment, displays differently after I upload it to the web server.

I am using the same browser and the same machine to view the pages. The only thing different, is the "server". I am using .net 3.5 and on my development environment the pages are served using the ASP.net Development Server. On the web server, the pages are served using IIS 6.0.

I have only a single CSS file that is contained within the "App_Themes/Default" folder that is used to control all the CSS in my application.

Here are some of the things that don't display the same:

1) I have a collapsible panel control that when expanded is supposed to show on top of all the other page elements. On the dev environment, it behaves correctly. On the web server, the panel slides underneath the other elements.

2) I have my <H2> element defined with a background and a certain font size. When displayed on my development environment, the text displays on one line. However, on the web server, the text is wrapped even though the text is the same size. It's as if the containing div is somehow rendered "smaller".

3) The width of buttons that do not have a fixed width (so the width is determined by the button text) is different between the development environment and the web server. The bottons on the server are always wider.

I checked to make sure there are no references to other CSS elements in the machine.config and global web.config on the server and on my development environment.

I know the server is reading from the CSS because in general, it looks similar (same colors, backgrounds, font style, etc). It's just that the sizes seems to be off and the layering of the divs.

Has anyone run in to this problem before? Any ideas of what I could look for?

Here are some links to two screenshots showing some of the differences. Notice that the font looks slightly different and the buttons have different widths.

WebServer: http://picasaweb.google.com/lh/photo/U8Oi7zKABHTYACSmsuKvWQ?feat=directlink
DevelopmentEnvironment: http://picasaweb.google.com/lh/photo/rMPZDSyQlcf9d3X04DzXbQ?feat=directlink

Re: Display difference between VS2008 and Browser

craigton — Mon, 07 Dec 2009 05:00:00 GMT

Hi Hua-Jun,

Wonderful - it's been driving me to distraction!

Many thanks for this,

Craigton

css style submenu not rendering??

Hanzie — Sat, 05 Dec 2009 05:00:00 GMT

Hello,

I used some sample code from msdn for creating a vertical menu and using css-styles.

I'm using visual studio 2008 (.net 3.5 framework) to build my website.

My problem is the submenu doesn't render as stated in the css class.

I tried it in firefox and IE. What am i doing wrong?

See code:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <title></title>
<style type="text/css">

.level1
{
    color: White;
    background-color: Black;
    font-variant: small-caps;
    font-size: large;
    font-weight: bold;
}

.level2
{
    color: Black;
    font-family: Gill Sans MT !important;
    font-size: medium;
    background-color: Yellow;
}

.level3
{
    color: green;
    background-color: Silver;
    font-family: Gill Sans MT !important;
    font-size: small;
}

.hoverstyle
{
    font-weight: bold;
}
       
.sublevel1
{
    background-color: Purple !important;
    color: Green !important;
    font-variant: small-caps !important;
}  
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:menu id="NavigationMenu1"
  staticdisplaylevels="3"
  staticsubmenuindent="0" 
  orientation="Vertical"
  target="_blank"
  Font-names="Arial, Gill Sans"
  Width="100px"
  runat="server">

  <LevelMenuItemStyles>
    <asp:MenuItemStyle CssClass="level1"/>
    <asp:MenuItemStyle CssClass="level2"/>
    <asp:MenuItemStyle CssClass="level3"/>
  </LevelMenuItemStyles>
  
  <StaticHoverStyle CssClass="hoverstyle"/>
  
  <LevelSubMenuStyles>
    <asp:SubMenuStyle CssClass="sublevel1"/>
  </LevelSubMenuStyles>
  
  <items>
    <asp:menuitem text="Home" tooltip="Home">
    <asp:menuitem text="Section 1" tooltip="Section 1">
      <asp:menuitem text="Item 1" tooltip="Item 1"/>
      <asp:menuitem text="Item 2" tooltip="Item 2"/>
      <asp:menuitem text="Item 3" tooltip="Item 3"/>
    </asp:menuitem>
    <asp:menuitem text="Section 2" tooltip="Section 2">
      <asp:menuitem text="Item 1" tooltip="Item 1"/>
      <asp:menuitem text="Item 2" tooltip="Item 2">
        <asp:MenuItem Text="Subitem 1"/>
        <asp:menuitem Text="Subitem 2"/>
      </asp:menuitem>
      <asp:menuitem text="Item 3" tooltip="Item 3"/>
    </asp:menuitem>
  </asp:menuitem>
  </items>
</asp:menu>

    </div>
    </form>
</body>
</html>

Display difference between VS2008 and Browser

craigton — Wed, 02 Dec 2009 05:00:00 GMT

Hi,

I've created a very simple CSS layout and it displays as expected in VS2008 Design mode but not when run in a Browser. The approach was to have a div container to define height and width and then 2 further divs for Heading and Content. The container was set at width 810 and height 310 and Heading at 600 width and height of 150 with a top margin of 25px so there should be an area all around showing the container colour.

As I say it display as expected in VS2008 Design mode but not in IE8 or Chrome where there is no display of the container colour at the top - the other 3 sides show the expected results.

CSS values are as follows:

body {

margin: 0px 0px 0px 0px;

padding: 0;

background: #000000;

font-family: Tahoma, Arial, Helvetica, sans-serif;

font-size: 11px;

color: #FFFFFF;

}

#container

{

width: 810px;

background-color: #FF00FF;

margin-right: auto;

margin-left: auto;

height: 310px;

}

#toparea

{

background-position: left top;

background: url(images/TopArea.jpg);

background-repeat: repeat-x;

width: 600px;

height: 150px;

margin-right: auto;

margin-left: auto;

margin-top: 25px;

}

#contentarea

{

background-repeat: repeat-x;

background: url(images/ContentArea.jpg);

background-position: left top;

width: 600px;

height: 150px;

margin-right: auto;

margin-left: auto;

}

body {

margin: 0px 0px 0px 0px;

padding: 0;

background: #000000;

font-family: Tahoma, Arial, Helvetica, sans-serif;

font-size: 11px;

color: #FFFFFF;

}

#container

{

width: 810px;

background-color: #FF00FF;

margin-right: auto;

margin-left: auto;

height: 310px;

}

#toparea

{

background-position: left top;

background: url(images/TopArea.jpg);

background-repeat: repeat-x;

width: 600px;

height: 150px;

margin-right: auto;

margin-left: auto;

margin-top: 25px;

}

#contentarea

{

background-repeat: repeat-x;

background: url(images/ContentArea.jpg);

background-position: left top;

width: 600px;

height: 150px;

margin-right: auto;

margin-left: auto;

}

Any clue would be appreciated so thanks in advance,

Craigton

WebPartZone styles: rendered inline or rendered in the header - how do I choose?

bepnewt — Wed, 02 Dec 2009 05:00:00 GMT

Background:

I'm working on a site that has 1 page in it with a user control that contains a WebPartManager and 2 WebPartZones. The WebPartZones have a lot of style information defined such as MenuLableHoverStyle, MenuVeryHoverStyle, TitlebarVerbStyle, etc.

The way it is now, when the HTML is rendered, the styles are inline in each of the HTML elements that are created for the WebParts. Everything works fine.

I'm converting the site to use a MasterPage. When I put the page into a MasterPage, the styles are now rendered at the top of the page inside STYLE tags and each of the elements is given a classname that matches up with style definitions in the STYLE tags. This shouldn't be a problem, and it looks fine in Firefox and Chrome, but not in IE(8). IE8 is ignoring the style definitions that are now in CSS at the top of the page.

I'm not asserting that the MasterPage is what is causing this. That just happened to be what I was doing when the rendering change happened. I also fixed some bad HTML at the same time involving mismatched tags, etc.

From my research, this is what I've decided is the issue:

The classnames that are created for the styles all start with "_" ( underscore character ). Based on multiple things I read, this is not a legal character to start a class or ID name with and IE is respecting this "rule" by not applying the styles defined in the STYLE tags to the elements.

I use the Developer Tools built into IE8 and remove the "_" from one of the class names and from the style definition and *poof*, it renders with the correct style. I can also get it to use the styles if I change the Browser Mode to IE7 and change the Document Mode to Internet Explorer 7 Standards.

What I would like to do:

I would like to either:

Force the styles to render inline like they used to before the change to a MasterPage
Force the classnames NOT to start with an "_" character

Is there any way to do this? Or, if my research is flawed, do you have any insight on how to get IE8 to render the defined styles in the WebPartZone?

More information about the site:

This is just random information that may or may not help.

The site is being developed in VS 2008.
The solution has been upgraded from a VS 2005 site at some point.
The web site IS as "Web Site" not a "Web Application".
The WebPartManager and WebPartZone controls are from the System.Web (2.0.0.0) assembly which is in the GAC.
The WebPartManager is ALWAYS in WebpartManager.BrowseDisplayMode.
Personalization is NOT enabled on the WebPartManager.
I tried using the CSSClass property of the various WebPartZone properties. I created my own classes and put them in a Style Sheet, but that didn't work.

Any help is appreciated. I had to revert this page back to not use our MasterPage for now, but would really prefer it to be converted.

Thanks,

-BEP

pop up a asp.net panel control on link button click and disabling the back ground

Sathishj1987 — Fri, 27 Nov 2009 05:00:00 GMT

hi,

i do have a asp.net panel containing

the file upload controls ,textbox and a button thats used for the user to upload the files....

or some other controls thats gets data from database and inserts data...

The problem is that , when the panel is visible the back ground is still acessable...i just want to avoid this suggest me some code snippets or a idea that must pass the following conditions

1.No Asp.net Ajax

2.i need this to support in IE 6 so no Z index in the CSS.

3.Currently i am using Css 2.1...so opacity can't be used

can use javascript

Give me some idea....or a sample code

Thanks Sathish

Re: Can any one Suggest me Designing Tools/Software for CSS?

einatsm — Thu, 26 Nov 2009 05:00:00 GMT

You can try Visual WebGui - it offers a free preview version of its framework which includes a cool point & click UI designer.

http://www.visualwebgui.com/tabid/637/Default.aspx