Solved

How can I get rounded corners on my box?

Posted on 2015-01-16
27
131 Views
Last Modified: 2015-01-28
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...

screenshot of the good menu
Problematic menu (edges of my menu are square as snot - can't have that)

screenshot of bad menu
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!
0
Comment
Question by:brucegust
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 9
  • 5
  • +1
27 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40554464
You're seeing the square corners in IE?  Which version?
0
 
LVL 2

Expert Comment

by:Elxn
ID: 40554465
-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.
0
 

Author Comment

by:brucegust
ID: 40554472
Dave, I'm using IE9 and Elxn, I tried your suggestion and it didn't budge. Same thing...
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Expert Comment

by:Elxn
ID: 40554484
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...
0
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 250 total points
ID: 40554498
This is what I'm using on a private page that works in all browsers.  The 'img' part is inside the 'ctprof' element.
.ctprof {
	border: 1px solid #000000;
	border-radius: 11px;
	margin:2px;
	padding:4px;
	color:#000088;
	}
img { 
	margin:2px;
	border:1px solid #000000;
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
	border-radius: 11px; 	
	}

Open in new window

0
 

Author Comment

by:brucegust
ID: 40554499
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

0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40554523
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

0
 

Author Comment

by:brucegust
ID: 40554527
No change.

I don't know what the problem is...
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40554530
Oh, it still does Not work in IE8 but it does in IE9.
0
 
LVL 8

Expert Comment

by:albacom
ID: 40554557
I can assume the HTML code (a ul list in a container) but can you send it so to be more clear
0
 

Author Comment

by:brucegust
ID: 40554691
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?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40554713
I'll take a look at it more but later tonight.
0
 

Author Comment

by:brucegust
ID: 40554715
Thanks, Dave! I'll be up...
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40554845
Your 'working model' is pretty weird with a lot of 'invalid' code.  Your dropdowns are tables inside of 'ul's.
0
 
LVL 8

Expert Comment

by:albacom
ID: 40554892
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
0
 
LVL 8

Expert Comment

by:albacom
ID: 40554898
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.
0
 

Author Comment

by:brucegust
ID: 40556925
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?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40556936
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;
0
 

Author Comment

by:brucegust
ID: 40557529
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?
0
 
LVL 8

Expert Comment

by:albacom
ID: 40557577
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.
0
 
LVL 2

Accepted Solution

by:
Elxn earned 250 total points
ID: 40557587
I can't see how web servers would alter the files given to users.  A CSS document should be provided the same by web servers.  I bet Dave is right, you might have an old CSS file cached in your browser.  You already checked your CSS is up to date on the server, so maybe look at the page on a different computer that you know won't have the site cached.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40558099
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.
0
 

Author Comment

by:brucegust
ID: 40558507
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?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40558550
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.
0
 
LVL 8

Expert Comment

by:albacom
ID: 40558561
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.
0
 

Author Comment

by:brucegust
ID: 40561885
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?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40562556
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.
0

Featured Post

Enroll in July's Course of the Month

July's Course of the Month is now available! Enroll to learn HTML5 and prepare for certification. It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

628 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question