Solved

How can I get rounded corners on my box?

Posted on 2015-01-16
27
117 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
  • 10
  • 9
  • 5
  • +1
27 Comments
 
LVL 82

Expert Comment

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

Expert Comment

by:Elxn
Comment Utility
-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
Comment Utility
Dave, I'm using IE9 and Elxn, I tried your suggestion and it didn't budge. Same thing...
0
 
LVL 2

Expert Comment

by:Elxn
Comment Utility
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 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 250 total points
Comment Utility
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
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
No change.

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

Expert Comment

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

Expert Comment

by:albacom
Comment Utility
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
Comment Utility
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 82

Expert Comment

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

Author Comment

by:brucegust
Comment Utility
Thanks, Dave! I'll be up...
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
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
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

772 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now