Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How can I get rounded corners on my box?

Posted on 2015-01-16
27
Medium Priority
?
133 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 84

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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 1000 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 84

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 84

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 84

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 84

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 84

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 1000 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 84

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 84

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 84

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

688 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