<style>
#ctrtable{width:600px;margin-left:auto;margin-right:auto;}
</style>
For the purpose of centering a table on the viewport, the above style block is added to the web page.
While using Visual Studio 2013 Express in debug mode, the CSS does not render and the table is aligned to the left. However, when I manually add the style inline within a "style" attribute, the table is properly centered.
What could be causing this difference in rendering?
- Tom
When specifying a style like this:
<style>
#ctrtable{width: 600px; margin-left: auto; margin-right: auto;}
</style>
You can apply the style as follows:
<table id="ctrtable">
<tr>
<td>something</td>
</tr>
</table>
If you define the style in this manner:
<style>
.ctrtable {width: 600px; margin-left: auto; margin-right: auto;}
</style>
You can then use it like this:
<table class="ctrtable">
<tr>
<td>something</td>
</tr>
</table>
Give this example a try:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.cntrtable{text-align: center;}
</style>
</head>
<body>
<table style="width: 100%;">
<tr>
<td><table class="cntrtable" style="width: 50%; margin-left: auto; margin-right: auto; background-color: #FF0000;"><tr><td>table-1</td></tr></table></td>
</tr><tr>
<td><table class="cntrtable" style="width: 50%; margin-left: auto; margin-right: auto; background-color: #00FF00;"><tr><td>table-2</td></tr></table></td>
</tr><tr>
<td><table class="cntrtable" style="width: 50%; margin-left: auto; margin-right: auto; background-color: #0000FF;"><tr><td>table-3</td></tr></table></td>
</tr><tr>
<td><table class="cntrtable" style="width: 50%; margin-left: auto; margin-right: auto; background-color: #FF00FF;"><tr><td>table-4</td></tr></table></td>
</tr>
</table>
</body>
</html>
I have been working on an HTML background video page, and everything seems to be working perfectly on desktop. However, when it comes to mobile, the video does not cover the full screen. Only half of the video is visible on the mobile screen. Here is the ...
Having trouble aligning the image on the right side of my website with two cards on the left side. Here is an example of what I'm aiming for: (https://i.sstatic.net/fBvTQ.jpg)](https://i.sstatic.net/fBvTQ.jpg) This is the current code: <!doctyp ...
I've encountered an issue with my table that I can't seem to resolve. The CSS should dictate the width and height, but something seems off. Am I approaching this incorrectly or is there something missing? Also, why are the borders not aligning p ...
As I delve into pure node.js, I encountered an issue related to the HTTP protocol. After spending hours searching and testing my code, I finally managed to serve my HTML page with CSS successfully. Take a look at my code snippet below: const server = http ...
After spending a day learning CSS and HTML, I decided to recreate a website from a YouTube video and add my own customizations. I was able to center the text in my introduction successfully. However, upon reviewing my progress (see screenshot here), it is ...
Using Next.js, React, Styled JSX, and Postcss, I encountered an issue while trying to style an imported component for a specific page. Since the stylesheets are generated for a specific component at render time, I attempted to include custom styles for the ...
When checking my website on different screen resolutions, I rely on a tool called Screenfly from quirktools.com. While using this tool, I came across an interesting feature - the display icon in the top left corner with a dropdown menu showing resolution ...
I recently started working with Django and I'm trying to figure out how to display all comments related to a specific listing on an online auction site. Can anyone help me find a solution for this? Models.py class Listing(models.Model): title = m ...
If we have style definitions like the following: .a.b { ... } .a.b.c { ... } Is there a method in SASS/SCSS to prevent duplication of the .a.b part? ...
I have a typical submenu structure set up like this: <ul> <li> <a href="#">Parent link</a> <ul> <li><a href="#">Submenu link</a></li> </ul> </li> </ul> In my de ...
My table contains a central image cell that spans two rows: <table width="100%" style="text-align:center"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td rowspan="2"><img src="http://www.skrenta.com/ima ...
const container = document.getElementById("container"); const svgElement = d3.select(container).append("svg") // Get the width and height computed by CSS. let width = container.clientWidth; let height = container.clientHeight; const colorScale = d3.scale ...
While embedding the Ace Editor in a Chrome popup window, I encountered a challenge. My goal was to keep the first row of text always visible at the top while allowing the rest of the Editor to fill the screen. However, there is an issue with a vertical scr ...
<div onClick={()=>do_stuff()}> <div classname="div-1"></div> <div classname="div-2"></div> <div classname="div-3"></div> <div classname="div-4"></div> ...
Visit my current site [This is the HTML code for my website:][2] <div class="column-box" style="width: 100%"></div> <div id="column1" style="float:left; margin:15; width:33%;"> <p>Sara Adams<br> I am a Web Developer and C ...
I have crafted this WP_Query to extract the titles and featured images from my post types. <div class="job-cont"> <?php $query = new WP_Query( array( 'post_type' => 'jobs' ) ); if ( $query->have_posts( ...
I recently encountered an issue with my list of items and their styling. Each list item contains an anchor element with a gray background, while the item itself has a gradient bottom border. However, I noticed that in some cases, there was a white line ap ...
I've attempted the following to solve my issue: body {height: 100%;overflow: auto; body #cornerImage {position: absolute;bottom: 0;} I also tried this solution: { margin:0; padding:0; } html, body { height: 100%; overflow:auto; } body #fixe ...
Working with Eloqua. Any ideas on what might be causing a space to appear in a link? The space doesn't show up during testing, only in the live version. Here is the code snippet: <p style="line-height:18px;"> <font face="calibri, Arial, H ...
Looking for guidance on how to convert this image bubble so that users can upload their images during account creation. When the user hovers over the image bubble, it should display "Upload profile image" and prompt them to upload an image upon clicking. A ...