.neT: CSS

Showing posts with label CSS. Show all posts

Unnecessary Horizontal Scrollbar in IE Popups or Frames XHTML Bug

Internet Explorer 6.0 for Windows, and Internet Explorer 5.0 for Mac has a bug that provides a horizontal scrollbar to pages residing in frames or popup windows, even when no horizontal scrollbar is needed. The cause is a flawed interpretation of the XHTML 1.0 transitional doctype.
Here are some solutions to the problem.
To fix the problem, you may select the solution that fits you best.

Solution 1:

Paste the following code in your stylesheet:

html {
 overflow-y: scroll;
}

This forces the vertical scroller to be enabled by default, thus, for some reason, eliminating IE’s need for a horisontal one.
Pros:

Fixes the problem completely, allowing you to keep your XHTML doctype intact

Cons:

Forces the vertical scroller, even when it’s not needed. Be careful not to attach the stylesheet to, for instance, a frameset index.

Solution 2:

Paste the following code in your stylesheet:

html {
 overflow-x: hidden;
 overflow-y: auto;
}

This hides the horisontal scrollbar, and sets the vertical scrollbar to only be enabled when necessary.
Pros:

Visually fixes the problem
Doesn’t force a vertical scroller when it is not needed

Cons:

Simply hides the horisontal scroller, doesn’t actually fix the problem. Thus, you may have content that will actually be located outside the page, where normally a horisontal scroller would be needed. It will be forcefully hidden.

Solution 3:

Paste the following code in your stylesheet:

body {
 margin-right: -15px;
 margin-bottom: -15px;
}

This adds a negative vertical and horisontal margin, the exact amount that IE adds, thus eliminating the artificial need for a scrollbar.
Pros:

Visually fixes the problem
Doesn’t force a vertical scrollbar

Cons:

Doesn’t allow you to utilize the fill horisontal screen real estate, due to the “artificially created” 15px margin

I personally use, and would recommend, solution 1.

Forcing scrollbars

The techniques used to “fix” the bug in question, can also be used for other purposes. With CSS, you can forcefully show or hide both vertical and horisontal scrollbars in both Mozilla Firefox and Internet Explorer.
Forcefully enabling scrollbars:

html {
 overflow: scroll;
}

Forcefully disabling scrollbars:

html {
 overflow: hidden;
}

Hiding the horizontal scrollbar in IE:

html {
 overflow-x: hidden;
}

Hiding the vertical scrollbar in IE:

html {
 overflow-y: hidden;
}

Forcing the horizontal scrollbar in IE:

html {
 overflow-x: scroll;
}

Forcing the vertical scrollbar in IE:

html {
 overflow-y: scroll;<
}

Forcing the horizontal scrollbar in Mozilla:

html {
 overflow:-moz-scrollbars-horizontal;
}

Note: This forces the horisontal scrollbar ONLY. This means even if a vertical scrollbar is necessary, it won’t appear.
Forcing the vertical scrollbar in Mozilla:

html {
 overflow:-moz-scrollbars-vertical;
}

Note: This forces the vertical scrollbar ONLY. This means even if a horisontal scrollbar is necessary, it won’t appear.

Style no horizontal scroll on page

html {
 overflow-x: hidden;
 overflow-y: auto;
}

Modeldelpopup CSS Class

 .modalBackground

        {

            background-color: White;

            filter: alpha(opacity=40);

            opacity: 0.5;

        }

        .ModalWindow

        {

            border: solid 1px White;

            background: Gray;

            padding: 0px 10px 10px 10px;

            position: absolute;

            top: 180px;

            left: 22px;

            height: 206px;

            width: 439px;

        }

 <cc1:ModalPopupExtender ID="MPE1" runat="server" BackgroundCssClass="modalBackground"

                            TargetControlID="LnkBranches" PopupControlID="Panel1" DropShadow="true">

                        </cc1:ModalPopupExtender>

Style Sheets

<link href="myFirstStyleSheet.css" rel="stylesheet"  type="text/css">

The above line of code links your external style sheet called ‘myFirstStyleSheet.css

to the HTML document. You place this code in between the <head> </head>  tags in your web page.

.my3rdNewStyle {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight: bold;
   font-size: 12pt;
   color: #FF0000;
}

 In the above example I have created a series CSS classes  that can be applied to any HTML tag like so:

<h2 class=”my3rdNewStyle”>My CSS styled  text</h2>

When you apply a CSS class to it, the CSS code overrides the default size that you would normally get with an <h2> tag in favor of the size specified in the CSS class. So now you can see that CSS can override default HTML tag behavior!
In the above examples, I have CSS code where I define my CSS classes and then ‘apply’ them to various elements in the page. Another way to apply CSS is to globally redefine an HTML tag to look a certain way:

h1 { font-family: Garamond, "Times New Roman",  serif; font-size: 200%; }

What this CSS code does is set the font style and size of all <h1> tags in one shot. Now you don’t have to apply a CSS class as we did before to any <h1> tags since they are automatically all affected by the CSS style rules.

Here is another example of where I give the whole page bigger margins:

body { margin-left: 15%; margin-right: 15%; }

As you can see, you can redefine any tag and change the way it looks! This can be very powerful:

div {
   background: rgb(204,204,255);
   padding: 0.5em;
   border: 1px solid #000000;
}

The above CSS code sets that any <div></div> tag will now have a background color of ‘rgb(204,204,255)’ and have a padding of 0.5em and a thin 1 pixel border that is solid black.

LINK

In this last example I will show you the ‘super cool’ CSS code that allows you to create link roll-over affects without images:

a:link { color: rgb(0, 0, 153) }
a:visited { color: rgb(153, 0, 153) }
a:hover { color: rgb(0, 96, 255) }
a:active { color: rgb(255, 0, 102) }

The above CSS will cause your links to change color when someone hovers their mouse pointer over it, instant rollovers with no images! One important note with the above code, is that it is important that the style declarations be in the right order:
“link-visited-hover-active”,