Learn VBA & Macros in 1 Week!

CSS - Stabilizing Nav Bar Glitch, Nifty Corners

Full Excel VBA Course - Beginner to Expert

Stabilizing Nav Bar Glitch, Nifty Corners	View Content

Hello All,

I've been messing with this for quite some time now. Basically, I'm trying to remove this small jumping effect that the nav bar takes on when the page loads. Here is a sample test If you reload it, you can see there is a subtle jump. I find this becomes a lot more noticeable on pages with heavier content such as Buffing. I'm sure there is a way to make this more solid/stable.... Can anyone provide any insight on how to remedy?

Note: Notice how in this example; http://www.html.it/articoli/niftycube/nifty4.html , the boxes do not glitch, they are solid...

But here they do;
http://www.html.it/articoli/niftycube/nifty5.html

I'm not sure why though and what I might be doing wrong here...

Best,
Colin

Full Excel VBA Course - Beginner to Expert

Float Or Display Inline Navigation W Nifty Corners

Similar Tutorials

View Content

I'm having a little trouble getting my navigation to have the
effect of the nifty corner's script .

[EDIT]

I've put the relevant files on an example page, but it doesn't
seem that Angelfire is allowing the javascript?

[/EDIT]

I've attempted, so far, to float the menu to the left, and then
give each <li> display inline to get a horizontal menu. This part
works in Fx1.0.7, but in IE6.0 each <li> is a 100% width?

Any help would be greatly appreciated. I've never used the
nifty corners before.. so far it hasn't been that hard, except
for this episode...

If any of the CSS is redundant, please tell me so that I can fix it, I've been trying to get the nifty corners to work
and may have overlooked some errors.
Code:

	html,
	body{
		margin:20px auto 20px auto;
		padding:0px;
		background-color:#333;
		font-family:Arial,sans-serif;
	}
	#container{
		margin:auto;
		width:700px;
		min-width:300px;
		background-color:#333;
	}
	#header{
		color:#F60;
		width:700px;
		font-size:25px;
		text-align:center;
		background-color:#FFF;
		font-family:'Arial Bold',sans-serif;
	}
	#menu{
		margin:0px;
		padding:0px;
		text-align:center;
	}
	#menu #nav{
		float:left;
		padding:0px;
		list-style-type:none;
		margin: 0px 0px 15px 0px;
		background-color:#333;
	}
	#nav li{
		display:inline;
		margin-left:5px;
		margin-right:5px;
	}
	#nav li a{
		padding:2px;
	}
	#content{
		padding:10px;
		background-color:#FFF;
	}
	* a{
		color:#F60;
		font-size:10px;
		text-decoration:none;
		vertical-align:middle;
	}

Code:

<div id='menu'><ul id='nav'>
			<li><a href='#' title='' class='tab'>LOREM</a></li>
			<li><a href='#' title='' class='tab'>IPSUM</a></li>
			<li><a href='#' title='' class='tab'>DOLOR</a></li>
			<li><a href='#' title='' class='tab'>SIT</a></li>
			<li><a href='#' title='' class='tab'>AMET</a></li>
		</ul></div>
		<div style='clear:both;'></div>

Code:

function NiftyCheck(){
  if (!document.getElementById || !document.createElement) return 0;
  var b= navigator.userAgent.toLowerCase();
  if (b.indexOf('msie 5') > 0 && b.indexOf('opera')==-1) return 0;
  return 1;
}

function Rounded(selector,bk,color,size){
  var v= getElementsBySelector(selector);
  for (var i=0; i < v.length; i++){
    AddTop(v[i],bk,color,size);
    AddBottom(v[i],bk,color,size);
  }
}

function AddTop(el,bk,bColor,size){
  var d= document.createElement('b');
  var cn= 'r';
  var lim= 4;
  if (size && size=='small'){
    cn= 'rs';
    lim= 2;
  }
  d.className= 'rtop';
  d.style.backgroundColor= bk;
  for (var i=1; i <= lim; i++){
    var x= document.createElement('b');
    x.className= cn + i;
    x.style.backgroundColor= bColor;
    d.appendChild(x);
  }
  el.insertBefore(d,el.firstChild);
}

function AddBottom(el,bk,bColor,size){
  var d= document.createElement('b');
  var cn= 'r';
  var lim= 4;
  if(size && size=='small'){
    cn= 'rs';
    lim= 2;
  }
  d.className= 'rbottom';
  d.style.backgroundColor= bk;
  for(var i=lim; i > 0; i--){
    var x= document.createElement('b');
    x.className= cn + i;
    x.style.backgroundColor= bColor;
    d.appendChild(x);
  }
  el.appendChild(d,el.firstChild);
}

Mac Ie 5.2 Positioning Glitch

Similar Tutorials

View Content

I'm just taking the plunge from tables to CSS. So far, so good (I think.) Anyway, the site I'm working on looks fine in IE/Mozilla/Opera/Safari, but in IE 5.2 for the Mac, the div containing the text shifts off-center to the right. Any help on correcting this or improving the page is appreciated. I've included a link to the page & the stylesheet is included below.

Website Link

#about {
position: absolute;
left: 181px;
top: 110px;
width: 181px;
height: 141px;
}

#aboutcont {
background-color: #FFFFFF;
position: relative;
height: 600px;
width: 724px;
border: 1px solid #000000;
margin: 0px auto;
top: 30px;
padding: 0px;
overflow: visible;
}

body {
background-color: #999999;
background-image: url(images/bg.jpg);
text-align: center;
}

#contact {
position: absolute;
left: 543px;
top: 110px;
width: 181px;
height: 141px;
}

#contactcont {
background-color: #FFFFFF;
position: relative;
height: 580px;
width: 724px;
border: 1px solid #000000;
margin: 0px auto;
top: 30px;
padding: 0px;
overflow: visible;
}

#contacttext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
top: 265px;
position: absolute;
background-color: #E5E2E2;
border: double;
height: 265px;
left: 3%;
right: 3%;
padding: 3px;
}

#client {
position: absolute;
left: 362px;
top: 110px;
width: 181px;
height: 141px;
}

#disclaimer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: left;
top: 290px;
position: absolute;
padding: 3px;
left: 3%;
right: 3%;
border: 1px dotted;
}

#ftr {
position: absolute;
top: 518px;
left: 45px;
}

#ftrabout {
position: absolute;
top: 578px;
left: 45px;
}

#ftrcontact {
position: absolute;
top: 558px;
left: 45px;
}

#ftrindex {
position: absolute;
top: 365px;
left: 45px;
}

#main {
background-color: #FFFFFF;
position: relative;
height: 540px;
width: 724px;
border: 1px solid #000000;
margin: 0px auto;
top: 30px;
padding: 0px;
overflow: visible;
}

h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-variant: small-caps;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #000000;
}

h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-variant: small-caps;
color: #000000;
text-align: right;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #000000;
}

#hdr {
position: absolute;
left: 25px;
top: 25px;
width: 282px;
height: 74px;
}

#index {
background-color: #FFFFFF;
position: relative;
height: 400px;
width: 724px;
border: 1px solid #000000;
margin: 0px auto;
top: 30px;
padding: 0px;
overflow: visible;
}

input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}

input.button {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
border: 1px solid #000000;
background-color: #FFCC99;

}

#noel {
float: right;
}

#noelp {
text-align: right;
}

#practice {
position: absolute;
left: 0px;
top: 110px;
width: 181px;
height: 141px;
}

#robert {
float: left;
}

table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}

#text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
top: 265px;
position: absolute;
background-color: #E5E2E2;
border: double;
height: 225px;
padding: 3px;
left: 3%;
right: 3%;
}

#textabout {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
top: 265px;
position: absolute;
background-color: #E5E2E2;
border: double;
height: 285px;
left: 3%;
right: 3%;
padding: 3px;
}

textarea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}

ul {
list-style-type: circle;
line-height: 18px;
text-align: center;
}

Scrolling Glitch In Chrome

Similar Tutorials

View Content

Hey guys, So if you check out my site at www. paulfenton .tk
you can see that I have gone for a slightly different design, with my site entirely encapsulated inside the main page, and the scrolling happening within a contained region.

I have turned off the main scrolling I think... however a glitch happens for chrome when you try to select everything in thewindow.(click near the top of the window and hold while moving the mouse downwards). What happens is the whole page scrolls down, which I want to prevent.

I have a feeling this is because I have images extending past the visibility of the main screen, but I need this so that everything still looks good for very large screens/resolutsion.

If anyone can reproduce this glitch and can help me prevent it that would be greatly appreciated.

Thanks,

-Paul

Tab Looks Right In Firefox But Minor Glitch In Ie

Similar Tutorials

View Content

Hey guys...I've been wrestling around with this problem for a few hours now. The below link shows a rounded corner tab that looks fine in firefox, but has a slight problem in IE. Thanks in advance for anyone who has any ideas. Code can all be seen when viewing source.

http://www.vainglore.com/vain_new/test_tab.html

Layout Glitch With Absolute Positioning

Similar Tutorials

View Content

I'm using absolutely positioned divs as a dropdown subnavigation. While I have yet program the javascript functionality that will make these divs appear and disappear, I am currently working on placing the divs just right on the page. (The simple part, right?? Right...)

Check out this page: http://www.psd7.com/fst/www_live/

It shows one of my subnavigation divs (the rest are hidden). On most browsers, when you roll over the Our Tradition button on the left, the horizontal line lines up perfectly with the top of the subnavigation. However, on the most commonly used browser on the planet (IE for Windows), these things are not lined up, but are slightly offset.

I can't imagine how to work this out. If I change the top value for the subnav so it lines up in IE for Windows, then it won't line up in any of the other browsers.

Here's the css code:

Code:

#subnav_our_tradition {
	position: absolute;
	left: 155px;
	top: 230px;
	width: 137px;
	background-color: #7C272D;
	z-index: 3;
}

Here's the HTML code regarding that one subnav:

Code:

<div id="subnav_our_tradition">
	<div class="subnav_item"><a href="our_tradition/intellectual_tradition.htm">The Franciscan Intellectual Tradition</a></div>
	<div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div>
	<div class="subnav_item"><a href="our_tradition/mission.htm">Mission Statement</a></div>
	<div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div>
	<div class="subnav_item"><a href="our_tradition/community_life.htm">Community Life</a></div>
	<div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div>
	<div class="subnav_item"><a href="our_tradition/resources.htm">Resources</a></div>
	<div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div>
	<div class="subnav_item"><a href="our_tradition/links.htm">Links</a></div>
</div>

Can anyone suggest a workaround?

Firefox Css Link Hover Glitch

Similar Tutorials

View Content

Long title I know...

My problem is that I want a particular style for a link BUT it seems that Firefox has a glitch with it.

The css code is:

Code:

a, a:link, a:visited {
	color: #000;
	text-decoration: none;
	border-bottom: 2px solid #000;
}
		
a:hover {
	color: #28f;
	border-bottom: 0;
}

Basically Firefox starts "flashing" the cursor simply just by hovering over the link. It only does this if you hover over the "line" part of the link. Here's an image of what it looks like:

You can view this yourself on the page http://www.jasonashdown.co.uk/css_glitch.html

I did however find a way around it with css code:

Code:

a:hover {
	color: #28f;
	border-bottom: 2px solid transparent;
}

http://www.jasonashdown.co.uk/css_glitch_solution.html

This works fine in Firefox and Opera without displaying the glitch. BUT now IE won't accept it (putting a Doctype in the file seems to make the bottom-border disappear).

Can anybody explain to me why Firefox has this glitch?
I couldn't find anything about this problem on this forum or through google. It has been bothering me for months.
Many Thanks in advance

Rounded Corners

Similar Tutorials

View Content

Hi,

Does anyone know of a way to do the effect of rounding corners (see attached image) in CSS?

As you'll see in the image, I just want 1 pixel to be offset and be in a different colour for each corner of my box.

Rounded Corners

Similar Tutorials

View Content

What is the best way to make your element corners rounded with CSS? I'm kind of looking for a good tutorial.

Rounded Div Corners Help

Similar Tutorials

View Content

I have copied this tutorial, but my divs are not showing rounded, but still square. http://www.sitepoint.com/article/ro...-css-javascript Tut link

Can anyone see what I've done wrong?

I have attached a screenshot as the webpage is located on a protected server. The header is what I'm trying to make round. I have stroked it in black to show you

My html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Test Rounded Div</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div class="container" align="center">
  <div class="header">
   <div>  <!-- upper left corner-->
     <div> <!-- bottom right-->
       <div> <!-- bottom left -->
         Header
       </div>
     </div>
   </div>
  </div>
  <div id="left">Left</div>
  <div id="right">Right</div>
  <div id="footer">Footer</div>
 </div>
</body>
</html>

My CSS:

Code:

div.header {
  width: 200px;
  background: #4095BF url(img/blue_top_rt.gif) no-repeat top right;
}

div.header div {
  background: transparent url(img/blue_top_left.gif) no-repeat top left;
}

div.header div div {
  background: transparent url(img/blue_bottom_rt.gif) no-repeat bottom right;
}

div.header div div div {
  background: transparent url(img/blue_bottom_lt.gif) no-repeat bottom left;
  padding: 15px;
}

Help With Rounded Corners

Similar Tutorials

View Content

Thanks for reading my question

Here is the link to the two pages in question.

http://www.pierced.ca/Kelly/cardsRound.htm http://www.pierced.ca/Kelly/indexRound.htm

I know my images for the rounded corners aren't round, that's not the problem. My problem is the positioning of the images.

When I view the pages using IE, the "Menu" images line up perfectly, and it's just the bl.jpg and br.jpg images on the "Info" section that don't.

When I view the pages using FireFox, the bl.jpg and br.jpg images on the "Menu" section are off.

Any words of wisdom to get both to work?

Thanks again,

Brad

Css Rounded Corners, But I Only Want Borders

Similar Tutorials

View Content

Hi i know there prolly loads around, iv been searching for ages but cant find one that will do the job.
I want to create rounded corners in CSS but completely CSS no javascript no images etc.

i found one called spiffy corners, it would have been perfect but it was only does complete box color, i only want borders, i wouldnt figure out how to change it to just borders

Any one have any ideas?
http://www.spiffycorners.com/

Css Rounded Corners With Borders

Similar Tutorials

View Content

I'm looking for suggestions for CSS based rounded corners. I've seen a number of nice tutorials that show how to do solid corner, but I'm interested specifically in corners with borders.

Simple Machines Forum has something he

http://mods.simplemachines.org/

But I'm having trouble digging the details out of the style sheets. I can't seem to make it work for me.

I'm really trying to avoid any JS. I'm having trouble getting the corners to line up when the parent DIV has a border. The corner images want to sit inside the border. I understand why this is, but not how to do it correctly for what I want.

Think of a box with, say, a 2 pixel border and rounded corners... Just like the example I've provided above.

Ideas?

Curved Corners With Border

Similar Tutorials

View Content

I want to implement a navigation menu as a box with curved corners and a dotted border. What would be the best way to implement this. I have found some methods that achieve a box with the curved corners using just CSS but can't find any method to get them with borders. I am open to suggestions that require learning authoring software.

Rounded Corners + Italics = Bad Ie

Similar Tutorials

View Content

I used this tutorial to create my rounded corner boxes.

Now if I change the font in the content of the box to italics, IE goes bananas. I read about the "Holly Hack" by setting the height to 1%. I can't seem to get it work with these rounded corner boxes. I'm not sure what div to apply it to. Here is the relevant html for the boxes:

Code:

<div class="bluebox">
			<div class="hd"><div class="c"></div></div>
			<div class="bd">
				<div class="c">
                                       <h4>Something</h4>
			               <p>Content Goes Here</p>
				</div>
			</div>
			<div class="ft"><div class="c"></div></div>
		</div>

And the css is this:

Code:

.bluebox {
margin:0 auto 8px auto;
color:#fff;
}

.bluebox .hd .c{
font-size:1px;
height:16px;
}

.bluebox .ft .c{
font-size:1px; /* ensure minimum height */
height:18px;
}

.bluebox .hd {
background:transparent url(images/tlb.gif) no-repeat 0px 0px;
}

.bluebox .hd .c {
background:transparent url(images/trb.gif) no-repeat right 0px;
}

.bluebox .bd {
background:transparent url(images/mlb.gif) repeat-y 0px 0px;
}

.bluebox .bd .c {
background:transparent url(images/mrb.gif) repeat-y right 0px;
}

.bluebox .bd .c .s {
background:#1caaec url(images/msb.jpg) repeat-x 0px 0px;
}

.bluebox .ft {
background:transparent url(images/blb.gif) no-repeat 0px 0px;
}

.bluebox .ft .c {
background:transparent url(images/brb.gif) no-repeat right 0px;
}

.bluebox h4 {
font:0.9em Verdana, sans-serif;
font-weight:bold;
padding-left:5px;
}

.bluebox p {
font:0.8em Verdana, arial, sans-serif;
font-style:italic;
padding:2px 10px 8px 5px;
text-align:justify;
color:#000000;
}

Any ideas where to stick the Holly Hack?

Rounded Corners, Css Conundrum

Similar Tutorials

View Content

One problem I've had so far with CSS, is that I haven't found a good way to display rounded corners or anything that would change the perfect rectangle of a div. Previously, using tables, I would just set up a 9x9 table with a repeating background on the top bottom and sides, then an image in each corner. That allowed me a lot of flexibility.

Is there some sort of equivalent to this in CSS, or a way of getting around it?

Problem With Rounded Corners In Ie

Similar Tutorials

View Content

Hi

I'm trying to match the overhead menu element of a Coppermine theme to a phpBB style. I've just run into a few problems and I was wonding if anyone could help please?

Coppermine here - http://www.brummiesfans.com/coppermine
phpBB3 here - http://www.brummiesfans.com/main/

Where I would like some help please is in getting the menu bar to have the same rounded corners as in phpBB3. What I have tried to do is to use the CSS from phpBB3, but on this occasion, it has
not worked. The code is shown below. I don't have a problem in Firefox, Safari or Chrome, as there is code in place to sort the rounded corners out in CSS, however I need the missing piece put into place for IE, and this is where I need help.

In phpBB3 the div classes are called "corners-top" and "corners-bottom".

The relevant graphics files have also been copied across. (e.g. www.brummiesfans.com/coppermine/themes/brummies/images/corners_right.png)

If someone can suggest how the matter can be fixed then I'd be very grateful.

The relevant bits of the template.html and style.css file wordings follow, which hopefully will be of help.

TEMPLATE.HTML
Code:

		<div class="navbar">

			<span class="corners-top"><span></span></span>

            <div id="main_menu">
                    {SYS_MENU}
                    {SUB_MENU}
                    {ADMIN_MENU}
                <!-- Begin IE7 support --><img src="images/spacer.gif" class="menuheight" alt="" /><!-- End IE7 support -->
            <div class="clearer"></div>

			<span class="corners-bottom"><span></span></span>	
		</div>

STYLE.CSS
Code:


.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
	margin: 0 -10px;
}


span.corners-top {
	background-image: url("images/corners_left.png");
}

span.corners-top span {
	background-image: url("images/corners_right.png");
}

span.corners-bottom {
	background-image: url("images/corners_left.png");
}

span.corners-bottom span {
	background-image: url("images/corners_right.png");
}

div.headerbar span.corners-top {
    background-image: url("images/corners_left2.png");
}

div.headerbar span.corners-top span {
    background-image: url("images/corners_right2.png");
}


span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
	font-size: 1px;
	line-height: 1px;
	display: block;
	height: 5px;
	background-repeat: no-repeat;
}

span.corners-top {
	background-image: none;
	background-position: 0 0;
	margin: 0 -5px;
}

span.corners-top span {
	background-image: none;
	background-position: 100% 0;
}

span.corners-bottom {
	background-image: none;
	background-position: 0 100%;
	margin: 0 -5px;
	clear: both;
}

span.corners-bottom span {
	background-image: none;
	background-position: 100% 100%;
}

.headbg span.corners-bottom {
	margin-bottom: -1px;
}

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
	margin: 0 -10px;
}

.rules span.corners-top {
	margin: 0 -10px 5px -10px;
}

.rules span.corners-bottom {
	margin: 5px -10px 0 -10px;
}

Thanks in advance for any assistance.

Martin

Need Help Making Rounded Corners

Similar Tutorials

View Content

Hello,

I am in the making of my first css site. I made some rounded corners boxes in photoshop and saved them as gif. When I load them in the css code, the image shows up as i wanted in the box divs, but the issue is that the white box around the rounded corners are there and is very disturbing. Any tips on how to remove these white edges?

Any answer is appreciated

Box Using Css Rounded Corners, Shade

Similar Tutorials

View Content

Hi All,

In one of my websites, I like to have boxes (rounded corners) like here, which is almost ok, except the rightside repeater is not repeating and not in the place.

Do anybody know how to fix this? Any help would be appreciated.

EDIT: Tried in different way, please have a look at it here

Rounded Corners Inside

Similar Tutorials

View Content

The page I'm working on
and
The css script

as you can see, the inside of the corners are not rounded. How do I resolve this?

Stupid Ie With Rounded Corners Box

Similar Tutorials

View Content

OK so what i'm trying to do, obviously, is create a rounded box. I'm using 6 images and the thing is divided into 3 parts vertically (the top part, the content part and the bottom part). Those parts are divided into 3 parts as well (left corner part, looping background part and right corner part). It works like a charm in real browsers, but IE is screwing things up as always. To simplify things, i'll just illustrate the concept of the top part of the box.

Code:

<div id="thebox">
<div class="dbtopleft"><div class="dbtopright"><div class="dbtoploop"></div></div></div>
</div>

So we have a wrapping div that is, let's say, 500 pixels wide and inside we have the top part: topleft div contains a left corner image, topright div contains a right corner image and is padded 25 pixels (the width of the corner) left and right. The middle div (toploop) has a top looping picture and is, obviously, 25 pixels away from each side. Here's css illustrating that:

Code:

#thebox {
    position: absolute;
    left: 500px;
    top: 300px;
}
.dbtopleft {
    background: url(cb_tl.png) no-repeat;
    height: 25px;
}
.dbtopright {
    background: url(cb_tr.png) no-repeat top right;
    height: 25px;
    padding: 0 25px 0 25px;
}
.dbtoploop {
    background: url(cb_t.png) repeat-x;
    height: 25px;
}

So, as i've already mentioned, this thing works in normal browsers, but in ie it doesn't take the full width of the wrapper div. Instead it displays an ~50px box with both corners and the wrapper is ... well ... 500px. Does someone know of any hack to make this code work in stupid IE?

Update: if i specified the width of the wrapper, it would seem to work, but i don't want to do that, since the width may vary.