Link to home
Start Free TrialLog in
Avatar of Bruce Gust
Bruce GustFlag for United States of America

asked on

How can I get rounded corners on my box?

Attached you'll see two graphics. One has my menu showing up with the rounded corners that I want (which is hosted on my computer). The other shows you the same page, but for some reason the corners are square.

I've tried a couple of different options, but I'm at a loss.

Here's the code that I'm using with the "working" code commented out, in light of it not being processed in the same way on my live server.

Any suggestions?

Good menu...

User generated image
Problematic menu (edges of my menu are square as snot - can't have that)

User generated image
Here's the CSS that I'm using. The portion you see that's commented out works great on my computer, but doesn't work at all on the live server.

.navcontainer ul ul {
display: none;
background: none;
margin-top: 30px;
margin-left:-100px;
padding-top: 0;
position: absolute;
background-color: #cccccc;
border-style:solid;
border-width: thin;
border-color:#cccccc;
line-height:35px;
height:auto;
z-index:100;
/*border-radius:6px;
-moz-border-radius:6px;*/
border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;

}

Open in new window


What else can I try?

Thanks!
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

You're seeing the square corners in IE?  Which version?
-webkit-border-radius: 6px; /* Add this in */
-moz-border-radius: 6px;
border-radius: 6px;

You could try it like this.  You'd be adding in the webkit-border-radius declaration.

Untested, but i think it might work.
Avatar of Bruce Gust

ASKER

Dave, I'm using IE9 and Elxn, I tried your suggestion and it didn't budge. Same thing...
Is it possible that there could be a discrepancy in the CSS file you have on your server with what you have on your computer?  I'm assuming your viewing the page (on and offline) on the same computer right?

if you see rounded corners here: http://cssround.com/  and you put all the same css for corners in your file and still dont' see it.  Then maybe your server's file doesn't have the updated CSS...
SOLUTION
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I just confirmed that the live page is accessing the updated CSS file. Just to make sure that I'm not overlooking something in my CSS, here's the whole thing:

html { 
  height: 100%;
}

body { 
  font-family: Helvetica, Microsoft Sans Serif;
  font-size: 12px;
  background: #FFF;
  color: #000;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  }
  
.body_wrapper {
width:100%;
height:100%;
}
  
 .header {
 height:189px;
 min-width:1260px;
 margin:0px;
 background-image:url(../images/background.jpg);
 background-repeat: repeat-x;
 }
 
 #left_graphic {
 width:566px;
 height:189px;
 position:relative;
 z-index:2; 
 }
 
 #right_graphic {
 width:688px;
 height:189px;
 position:relative;
 float:right;
 z-index:2; 
 background-image:url(../images/right_header.png);
 }
 
 #right_tabs {
 width:528px;
 height:53px;
 position:relative;
 margin-left:160px;
 }
 
 #clockwork {
 position:relative;
 width:210px;
 height:35px;
 margin-left:466px;
 margin-top:17px;
 z-index:4;
 font-family:arial;
 size:10pt;
 color:#ffffff;
 text-align:right;
 }
 
 #search_box {
width:154px;
height:27px;
margin-top:0px;
margin-left:530px; 
 }
 
 #search_button {
 position:relative;
 height:27px;
 width:26px;
 margin-top:-27px;
margin-left:650px; 
 }
 
 input.search_box {
margin-top:3px;
margin-left:1px;
width:113px;
height:18px;
border:#ffffff; 
}

input.clock {
width:100px;
height:18px;
border:none; 
text-align:right;
background:transparent;
color:#ffffff;
}

.nav_bar {
position:relative;
margin-top:-31px;
background-image:url(../images/nav_bar_background.png);
height:29px;
width:100%;
min-width:1300px;
background-repeat:repeat-x;
z-index:5;
}

.navcontainer {
margin:auto;
width:1300px;
height:29px;
position:relative;
z-index:6;
}

.navcontainer ul {
position: absolute;
padding:0;
margin: 0px;
list-style-type:none;

}

/*here's my list characteristics as far how things are displayed and how they're "floated" */
.navcontainer ul li {
position: relative;
display: block;
float: left;
margin-left:35px;
z-index:10;
}

.navcontainer ul li a {
text-decoration: none;
display: block;
padding-right: 0px;
}

/* this command tells my li's within the first tier of ul's to bust out with a pulldown menu */
.navcontainer ul li:hover > ul 
{
display: block;
}

/* now we're getting jiggy with it by establishing the rules for the actual pulldown menu */
.navcontainer ul ul {
display: none;
background: none;
margin-top: 30px;
margin-left:-100px;
padding-top: 0;
position: absolute;
background-color: #cccccc;
border-style:solid;
border-width: thin;
border-color:#cccccc;
line-height:35px;
height:auto;
z-index:100;
-webkit-border-radius: 6px; 
border-radius:6px;
-moz-border-radius:6px;
border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;

}

.navcontainer ul ul li {
float:none;
margin:0px;
padding:0;
}

.navcontainer ul ul li a {
display: block;
float:none;
margin: 0 0 0 10px;
padding: 0;
font-family: Helvetica, Microsoft Sans Serif;
font-size: 18px;
color:.493417;
padding-left:0px;
z-index:10;
}	

.navcontainer ul ul li:hover > ul 
{
display: block;
}

.navcontainer ul ul li:hover {
display:block;
}

.navcontainer:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

a.home {
display:inline-block; /**** important ****/
margin-top:2px;
width:39px;
height:12px;
background-image:url(../images/button_home.png);
background-repeat:no-repeat;
}

a.regions {
display:inline-block; /**** important ****/
margin-top:2px;
margin-left:25px;
width:51px;
height:29px;
background-image:url(../images/button_regions.png);
background-repeat:no-repeat;
}

a.planning {
display:inline-block; /**** important ****/
margin-top:2px;
margin-left:25px;
width:58px;
height:15px;
background-image:url(../images/button_planning.png);
background-repeat:no-repeat;
}

a.budget {
display:inline-block;
margin-top:2px;
margin-left:25px;
width:189px;
height:15px;
background-image:url(../images/button_budget.png);
background-repeat:no-repeat;
}

a.network_tools {
display:inline-block; /**** important ****/
margin-top:2px;
margin-left:25px;
width:181px;
height:29px;
background-image:url(../images/button_network_tools.png);
background-repeat:no-repeat;
}

a.network_ops {
display:inline-block; /**** important ****/
margin-top:2px;
margin-left:25px;
width:132px;
height:15px;
background-image:url(../images/button_network_ops.png);
background-repeat:no-repeat;
}

a.reference {
display:inline-block; /**** important ****/
margin-top:2px;
margin-left:25px;
width:66px;
height:12px;
background-image:url(../images/button_reference.png);
background-repeat:no-repeat;
}

a.reports {
display:inline-block; /**** important ****/
margin-top:2px;
margin-left:25px;
width:120px;
height:15px;
background-image:url(../images/button_reports.png);
background-repeat:no-repeat;
}

a.footer_link {
color:white;
text-decoration:none;
}

.marquee_background {
position:relative;
height:250px;
width:100%;
background-image:url(../images/marquee_background.jpg);
background-repeat:repeat-x;
z-index:4;
}

.marquee {
width:1367px;
height:250px;
margin:auto;
background-image:url(../images/marquee.png);
}

.global_watermark {
margin:auto;
position:relative;
width:1367px;
height:640px;
background-image:url(../images/globe_watermark.jpg);
background-repeat:no-repeat;
}

.column_headings {
position:relative;
width:1367px;
height:113px;
background-image:url(../images/column_headings.png);
margin:auto;
margin-top:-25px;
z-index:5;
}

.column_wrapper {
width:1367px;
height:250px;
margin:auto;
}

.app_month {
margin-left:65px;
position:relative;
height:250px;
width:400px;
float:left;
overflow:auto;
}

.headlines {
margin-left:15px;
position:relative;
height:250px;
width:400px;
float:left;
overflow:auto;
}

.faqs {
margin-left:15px;
position:relative;
height:250px;
width:400px;
float:left;
}

.text_boxes {
clear:both;
width:1359px;
height:214px;
margin-top:10px;
margin:auto;
background-image:url(../images/text_boxes.png);
overflow:auto;
}

.important {
position:relative;
float:left;
margin-top:23px;
margin-left:85px;
width:562px;
height:153px;
}

.meet_team {
position:relative;
float:left;
margin-top:23px;
margin-left:65px;
width:562px;
height:153px;
}

.site_content {
clear:both;
width:1000px;
margin-bottom:-30px;
overflow:auto;
margin:auto;
}

.title_text {
font-size:16pt;
font-weight:bold;
}

.footer {
position:fixed;
bottom:0;
height:30px;
width:100%;
background-image:url(../images/footer.jpg);
background-repeat:repeat-x;
font-size:9pt;
color:#ffffff;
text-align:center;
}

.sub_menu {
position:relative;
float:right;
width:600px;
text-align:right;
margin-top:15px;
}

table.csv_sample {
 box-shadow: 7px 7px 15px #e9e9e9;
 border-collapse:separate;
border-radius:6px;
-moz-border-radius:6px;
 margin:auto;
 width:auto;
border: 1px solid #d7d4d4;
 }
 
 td.csv_sample {
padding:5px;
border: 1px solid grey;
 text-align:center;
 background-color:#cccccc;
 }
 
 td.csv_sample_cell {
padding:5px;
border-collapse: collapse;
border: 1px solid grey;
 }
 
 td.title {
 text-align:right;
 }
 
 table.regions {
border:none;
 margin:auto;
 }
 
 table.regions th {
 border: 1px solid #ffffff;
 background-color:#282828;
 height:20px;
 line-height:20px;
 text-align:center;
 font-weight:normal;
 color:#ffffff;
 }
 
 table.regions td {
 line-height:20px;
 text-align:center;
 vertical-align:top;
 width:150px;
 height:20px;
 }
 
 table.regions_list {
 border-radius:6px;
-moz-border-radius:6px;
background-color:#ffffff;
 border: 1px solid #cccccc;
 }
 
 table.regions_list td {
 text-align:left;
 line-height:20px;
 height:20px;
 }
  
 .conclusion {
width:750px;
margin:auto;
padding:10px;
border: solid #000000 1px;
color:#000000;
box-shadow: 5px 5px 10px #cccccc;
}

 .callout {
width:250px;
margin-right:10px;
position:relative;
float:left;
padding:10px;
border: solid #000000 1px;
color:#000000;
box-shadow: 5px 5px 10px #cccccc;
}

#code_container {
border:1px solid #000000; 
width:807px; 
height:250px; 
overflow:auto; 
background-color: #013c76;
font-family:Arial; 
color:#ffffff; 
font-size:10pt; 
margin:auto;
}

ol {
background-color:#ffc; 
color:#ffffff; 
padding-left:8px;
padding-right:10px;
margin-top:0px; 
margin-bottom:-12px;
}

ol li {
line-height:8px;
padding-top:3px; 
padding-bottom:3px; 
padding-left:3px;
}

ol li span {
color:#000000;
}

Open in new window

I edited my page since I saw some weird things and this is what I have now.  Works in all browsers.
.ctprof {
	border: 1px solid #000000;
	border-radius: 7px;
	margin:2px;
	padding:4px;
	color:#000088;
	}
img { 
	margin:2px;
	border:0px solid #;
	border-radius: 5px; 	
	}

Open in new window

No change.

I don't know what the problem is...
Oh, it still does Not work in IE8 but it does in IE9.
I can assume the HTML code (a ul list in a container) but can you send it so to be more clear
OK, here's a working model of the page: http://hihatwebdesign.com/team/

It works great! I've got my rounded corners, and everything is just ducky.

On this other server, I don't have my rounded corners and I've had to make some pretty big adjustments with my left margins in some instances.

I've had to my "margin-left" setting on line 150 to -100 px. Weird! I also had to something similar with my search box.

It's like there's something at work behind the scenes that I'm not seeing and I can't anticipate that's throwing things off.

On my box, it looks fine. On the server I have referenced above, it looks fine. Why would it be all squirreled up on the intranet server that I'm supposed be hosting this site on?
I'll take a look at it more but later tonight.
Thanks, Dave! I'll be up...
Your 'working model' is pretty weird with a lot of 'invalid' code.  Your dropdowns are tables inside of 'ul's.
Had a look at the code in firebug Lite using Crome. The menu did not display at all.
.navcontainer {
  height:29px;
  margin:auto;
  position:relative;
  width:1300px;
  /*z-index:6;*/
}

Open in new window


Canceled z-index on the container then the menu showed fine.

I will have a look at it again but at first thought unless you are very comfortable with CSS using positions like Relative or Absolute in the mix with z-index can cause you big problems.

I tend to use normal flow of the main sections / containers like float left or right then if I ever need to position anything absolutely I set position relative on the container then absolute on the child element that needs to be positioned absolutely

You may have too many child elements positioned absolutely referring to/from the same relative position which ultimately causes you to use z-index extensively
Ok z- index works fine, I  will check and test further. I may have something to do with just targeting IE8 css bordr-radius rules. If in the end does still not work you can use bg images.
This is what I'm using right now. No change. Still square corners on the one server that matters...

.navcontainer ul ul {
display: none;
background: none;
margin-top: 30px;
margin-left:-100px;
padding-top: 0;
position: absolute;
background-color: #cccccc;
border-style:solid;
border-width: thin;
border-color:#cccccc;
line-height:35px;
height:auto;
z-index:100;
-webkit-border-radius: 6px;
border-radius:6px;
-moz-border-radius:6px;
border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
}

Any more ideas on what else I could be doing?
It's not the server.  While the browser makes a difference, the only time the server makes a difference is your browser cache isn't refreshing your CSS file because the cache time is too long.  On that server, open the CSS file by itself, do a hard refresh, and then go back and refresh the page.

For what it's worth, the bottom 6 lines are redundant.

border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
Dave, I had those last lines in place because I had read somewhere that different versions of IE or it may have been different versions of CSS required those settings in order to produce rounded corners. So, I know it's redundant, but I put it there in an effort to be comprehensive.

Another thing I wanted to run by you. As I'm nearing the point of desperation, I'm trying to take a step back and be logical. Bottom line: I've got the same content that's being rendered differently by two different servers. If the code is identical, that means there would have to be a distinction between the two servers.

I don't know enough about networking and setting up a server, but I can tell you that the server that's giving me fits was set up very recently. As I read through articles such as http://stackoverflow.com/questions/4553077/1-page-served-from-2-different-servers-looks-different-in-1-browser-beyond-we and looked over another article last nite that elaborated on how older versions of IE add a default amount of indentation to a <ul> tag, I'm wondering if there isn't a setting or settings that I can inquire about to see if they wouldn't make a difference in the way my page is rendered.

What do you think?
I have not tested this in Ie8 but I am going to have a guess.

You can add the border rules again at the end of your css files in the containers named according to firebug.

This is to make sure no css rules are overriding the previous ones. Screen sizes also matter due to media queries brakpoints.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I've got the same content that's being rendered differently by two different servers.
No you don't.  The servers do NOT render any code, they merely deliver files.  Only Browsers 'render' the code.

All browsers have default settings for all of the HTML elements.  And they do vary from browser to browser.  That's why Eric Meyer came up with a CSS reset code that clears all of the margins and padding to 0 so anything you set after that will be the same on all browsers.
Dave, I trust your judgment and I'm not "pushing back, " but why when I'm looking at the same page, using the same browser, does it look different? Localhost is delivering it one way and the other server is delivering another.

BTW: The rounded corners is just a piece of this debacle. You mention margins. I saw Eric Meyer's name referenced in an article and I need to go and implement his stuff. I just got off the phone with my boss and although he was generally pleased, some of the margins were off because he was using a different browser. It's embarassing as well as exasperating because you think your page is looking pristine only to find that it doesn't look nearly as good as it should because of a number of different factors - browsers being one, but other dynamics as well, some of which I've yet to determine.

But while my boss is using a different browser, I'm not. So, for the sake of establishing a bottom line and wrapping up this question, I'm thinking Eric Meyer and something else I'm looking into called PIE.

Is there anything else I might consider?
Localhost is delivering it one way and the other server is delivering another.
If you are using the same browser then the files are Not the same.  

By the way, I almost Never use 'localhost' as an address.  Matter of fact, this computer does not have any web services at 'localhost', only at the machine's IP address.  There are several things that do not work at 'localhost' and cookies in Chrome is one of them.

To implement Eric Meyer's CSS reset, you have to put it First in your CSS before Anything else.  But then you may find that you have to change almost everything else that depends on margins and padding.
Well as Dave said!

The second css rule always overrides the second or even further down the hierarchy.

You can test code in chunks so for the purpose of debugging first then go for progressive enhancement.
Figured it out...at least I was able to get it to work. Now, I just want to understand WHY it worked.

Yesterday I was talking with one of our network administrators. I told him about the changes I was having to make in order to accommodate the live server - everything from exaggerated margins to having to contend with square corners as opposed to rounded corners etc. I asked him if he had any idea as to why, and he responded by saying:

1.      Different browser versions. VZW looks to be stuck on IE 8/9.
2.      IT gimped IE by forcing it into ¿compatibility mode?. If this is the case we can ~somewhat~ work through it like this…
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=100" />
<… other stuff …>

This renewed a resolve to determine if there was something unique about the enviornment that I was uploading to that would cause a difference between the content that displayed one way on my browser / localhost and my browser / live server.

I came across this article (https://msdn.microsoft.com/en-us/library/jj676913(v=vs.85).aspx) which seemed to refinforce what I was getting from my guy in Systems in that it is possible to specify document modes. While the server's specs will be subordinated to whatever the webpage may specify, there is an situation where the server can specify a starting point.

That made me go back and review what I had specified and I found some discrepancies. While I did have a HTML5 doctype (<!DOCTYPE html>), I found some superflous / potentially conflicting specs in my metatags for HTML 4.01 (  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> [http://www.w3schools.com/tags/att_meta_http_equiv.asp]). I eliminated that conflict and added this:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

...which, from what I understand tells the user's browser to utiltize the most current engine to render the page (https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible).

So, my problem is solved! My page on the live server looks exactly the way it does on my computer and the reason for that is:

1) I had a conflict with my doctypes
2) The server defined a starting point in terms of the document mode a user would utilize when he/ she accessed the page. In order to ensure my content was being processed by the most current engine to render the page, I had to adjust my meta tags to inlcude the "IE=edge" dynamic.

Is that sound reasoning?
I've seen some Apache servers send UTF-8 as the charset and the page can't override that.  That messes up the display when the author was trying to use a different charset.  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> has been the correct way to do that, at least until HTML5.